当前位置: 首页 > Web前端 > CSS

CSS水平垂直居中

时间:2023-03-31 13:08:52 CSS

下图绿色框水平垂直居中,你是怎么做到的?也许每个人都有自己的使用方式。下面是我总结的几种方法。废话不多说,直接上菜。1、使用绝对定位方式:top和left偏移50%,向后偏移margin。适合:已经具有固定大小的元素。响应,根据实际需要可能需要js操作。div1{背景:黄金;宽度:500px;高度:500px;位置:相对;}div2{宽度:400px;高度:400px;背景:绿黄色;:-200px;margin-left:-200px;

2..使用绝对定位方式:设置偏移量为0,以保证金自动属性。fit::固定大小的元素,不设置宽高,会填满整个父元素。#div1{背景:金色;宽度:500px;高度:500px;职位:相对;}#div2{位置:绝对;顶部:0;底部:0;左:0;右:0;宽度:400px;;保证金:自动;背景:绿黄色;}
3.使用伪元素的方式:div2和::after都转换为inline-block,将文字居中在父元素中实现元素的水平居中,设置伪元素的宽度为100%,然后div2和::after都垂直居中对齐。适用于:可变宽高的元素,元素的大小会随着内容的变化而变化,但无论怎么变化,都能始终保持垂直和水平居中。#div1{背景:金色;宽度:500px;高度:500px;文本对齐:居中;}#div2{背景:绿黄色;高度:400px;宽度:400px;显示:内联块;垂直对齐:中间;#div1::after{内容:'';高度:100%;显示:内联块;背景:绿色;垂直对齐:中间;4.使用伪元素的方法和方法3类似,只是元素属性不同。#div1{背景:金色;宽度:500px;高度:500px;文本对齐:居中;}#div2{背景:绿黄色;高度:400px;宽度:400px;显示:内联块;垂直对齐:中间;#div1::after{内容:'';高度:50%;显示:内联块;背景:绿色;5.设置元素为inline-block方法:在父元素中设置line-height和center,然后将垂直对齐方式设置为center才合适:父元素的高度是固定的,毕竟行高是要设置的。#div1{背景:金色;宽度:500px;高度:500px;行高:500px;文本对齐:居中;}#div2{宽度:400px;高度:400px;垂直对齐:中间;;背景:绿黄色;}可以根据实际情况使用不同的方法。本博客首发于我的博客,css水平居中垂直居中