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

CSS居中方法学习笔记

时间:2023-03-31 13:00:43 CSS

第一种:负边距

.one{position:absolute;宽度:200px;高度:200px;顶部:50%;左:50%;左边距:-100px;右边距:-100px;background:green;}优点:兼容基本浏览器缺点:宽高必须固定第二种方法:viamargin:auto
。二{位置:绝对;宽度:100px;高度:100px;顶部:0;左:0;右:0;底部:0;margin:auto;}以上两个方法可以把absolute改成fixed,注意fixed在ie下不支持第三种:table-cell
.inner{宽度:100px;高度:100px;显示:表格单元格;文本对齐:居中;垂直对齐:中间;}.foo{显示:内联块;宽度:50%;height:50%;}设置table-cell后,父元素变成了使用table-cee的第四种cell布局:行内元素居中内容居中.four{宽度:100px;高度:100px;行高:100px;text-align:center;}该方法只能使行内元素居中。常用于文本居中第五种:transformcentering.five{位置:绝对;顶部:50%;高度:50%;transform:translate(-50%,-50%);}优点是不需要定义宽高,但是对不兼容css3的浏览器不起作用第六种:伪类居中.six{position:aabsolute;左:0;右:0;顶部:0;底部:0;文本对齐:居中;}.six:before{内容:'';显示:内联块;垂直对齐:中间;高度:100%;}.six.content{显示:内联块;垂直对齐:中间;宽度:40px;高度:40px;行高:40px;}第八种:flex布局.eight{display:flex;对齐项目:居中;justify-content:center;}同样会有浏览器兼容性问题