井井客

搜索

CSS水平居中有哪些实现方式

实现元素水平居中的方式整理,主要针对子元素是块级元素时的场景。

1、position绝对定位 + margin

这个是我比较常用的方式,兼容性也不错,只是需要元素(块级)长度和宽度值

    .element {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 50%;
        left: 50%;
        margin: -100px 0 0 -100px;
        background-color: #f00;
    }

2、flex布局

    .box {
        display: flex;
        width: 500px;
        height: 600px;
        background-color: #f00;
        align-items: center;
        justify-content: center;
    }

将父元素设置为flex布局,子元素不区分是块级、内联元素都有效果。

3、table-cell模拟表格单元格

    .table {
        display: table;
    }
    .cell {
        display: table-cell;
		width: 500px;
		height: 600px;
		background-color: #f00;
		text-align: center;
		vertical-align: middle;
    }
    .element {
        width: 200px;
        height: 300px;
        background: #ff0;
        margin: 0 auto;
    }

用这种方式,需要在元素外面嵌套两层,最外层设置成table,中间层才设置成table-cell(直接写可能没有效果)。因为text-align: center;对子元素是块级元素时无效,所以如果子元素是块级元素还需要在子元素上设置margin: 0 auto。

其它

如果是内联元素可以用行高实现垂直居中。这个比较简单,就不多说了~

文章TAG:CSS

作者:井井客整理来源:原创
本文标题:CSS水平居中有哪些实现方式
本文链接:/c/29345.html

上一篇:整理CSS实现右边宽度固定左边自适应
下一篇:BFC-块级盒参与块级格式上下文

文章分类

相关阅读

随便看看