元素居中

Posted 2020-10-06 专注前端开发

一、css实现元素水平居中

margin:0 auto;

给元素设定宽度，而且不能加浮动，即可实现水平居中。左右边距自适应，div默认宽度最大化，加浮动后，div宽度最小化。

text-align:center;

 一般只能对图片，按钮，文字等行内元素(display为inline或inline-block)进行水平居中。在IE6、7中，它能对任何元素进行水平居中。

DOM结构
<div class="parent_div">css实现元素水平居中</div>

CSS样式
.parent_div {
    margin:auto;
    width: 600px;
    height: 300;
    text-align: center;
    border: 3px solid #f00;
}

二、css实现元素垂直居中

1、单行文字垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

.parent_div {
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    border: 3px solid #f00;
}

使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。

2、行内块级元素

.parent_div::after, .child_div{
  display:inline-block;
  vertical-align:middle;
}
.parent_div::after{
  content:‘‘;
  height:100%;
}

3、多行文本固定高度的垂直居中（模拟表格）

CSS中的vertical-align属性只会对拥有valign特性的(X)html标签起作用，但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素。

.parent_div {
    display: table;
    height: 300px;
}
.child_div {
    display: table-cell;
    width: 600px;
    vertical-align: middle;
    border: 3px solid #f00;
}

Internet Explorer 6 并不能正确地理解display:table和display:table-cell，由此产生以下解决方案。

<div class="parent_div">
    <div class="child_div">
        <div class="child_child_div">
        css实现元素垂直居中
        </div>
    </div>
</div>

.parent_div {
    display: table;
    _position: relative;
    overflow: hidden;
    border: 3px solid #00f;
    width: 600px;
    height: 300px;
}
.parent_div .child_div {
    display: table-cell;
    vertical-align: middle;
    _position: absolute;
    _top: 50%;
}
.child_div .child_child_div {
    _position: relative;
    _top: -50%;
    border: 3px solid #f00;
}

4、多行文本不固定高度的垂直居中

.parent_div {
    padding:25px;  
    border: 3px solid #f00;
}

使上下的padding值相同即可，这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。 

5、不固定宽高的垂直居中

<div class="parent_div">
    <div class="child_div">
    元素居中
    </div>
</div>

.parent_div {
    display: table;
    width: 100%;
    border: 3px solid #00f;
}
.parent_div .child_div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border: 3px solid #f00;
}

三、css实现元素水平垂直居中

1、模拟表格

.parent_div {
    display: table-cell;
    width: 600px;
    height: 500px;
    vertical-align: middle;
    border: 3px solid #f00;
}
.child_div {
    margin: 0 auto;
    width: 200px;
    height: 200px;
    border: 3px solid #00f;
}

2、模拟表格，改良版

<div class="parent_div">
    <div class="child_div">
        <div class="child_child_div">
        css实现元素水平垂直居中
        </div>
    </div>
</div>

.parent_div {
    display: table;
    border: 3px solid #f00;
    width: 600px;
    height: 300px;
}
.parent_div .child_div {
    display: table-cell;
    vertical-align: middle;
    border: 3px solid #00f;
    width: 400px;
    height: 200px;
}
.child_div .child_child_div {
    margin: 0 auto;
    width: 50%;
    border: 3px solid #f00;
}

总之，这可能是最好的居中实现方法，优点是内容块高度会随着实际内容的高度变化，浏览器兼容性也好。缺点是需要大量额外的标记，需要三层元素让最内层的元素居中。

如果你使用表格布局，那完全不用为各种居中问题而烦恼了，只要用到td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,因为表格默认对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中没有相对应的属性,但是在IE6、7中，我们可以用text-align:center对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效。在IE6、7中，可以通过css的text-algin来控制表格内容的水平方向的对齐，无论内容是行内元素还是块状元素都有效，但在IE8+以及chrome、firefox等浏览器中，text-align:center对块状元素无效，只能用表格自有的align属性。

3、行内块元素Inline-Block

基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央，下面用after，也可以用before。

如果内容块宽度大于容器宽度，比如放了一个很长的文本，但内容块宽度设置最大不能超过容器的100%减去0.25em，否则使用伪元素:after内容块会被挤到容器顶部，使用:before内容块会向下偏移100%。

如果你的内容块需要占据尽可能多的水平空间，可以使用max-width: 99%;（针对较大的容器）或max-width: calc(100% -0.25em)（取决于支持的浏览器和容器宽度）。

.parent_div {
    text-align: center;
    overflow: auto;
    border: 3px solid #00f;
}
.parent_div:after, .parent_div .child_div {
    display: inline-block;
    vertical-align: middle;
}
.parent_div:after {
    content: ‘‘;
    height: 100%;
    margin-left: -0.25em; /* To offset spacing. May vary by font */
}
.parent_div .child_div {
    max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
    border: 3px solid #f00;  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}

这种方法的优劣和单元格Table-Cell方式差不多，起初我把这种方式忽略掉了，因为这确实是一种hack方法。不过，无论如何，这是很流行的一种用法，浏览器支持的也很好。

优点：

• 高度可变
• 内容溢出会将父元素撑开。
• 支持跨浏览器，也适应于IE7

缺点：

• 需要一个容器
• 水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整
• 内容块宽度不能超过容器的100% - 0.25em

4、margin固定宽高居中

.parent_div {
    margin: auto;
    width: 600px;
    height: 500px;
    border: 3px solid #f00;
}
.child_div {
    margin: 150px 200px;
    width: 200px;
    height: 200px;
    border: 3px solid #00f;
}

这种定位方法纯粹是靠宽高和margin拼出来的，不是很灵活。

5、绝对居中Absolute Centering

.parent_div {
    position: relative;
    margin: auto;
    width: 600px;
    height: 300px;
    border: 3px solid #f00;
}
.child_div {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 200px;
    height: 200px;
    border: 3px solid #00f;
}

优点：

• 支持跨浏览器，包括IE8-IE10
• 无需其他特殊标记，CSS代码量少
• 支持百分比%属性值和min-/max-属性
• 只用一个类即可实现任何内容块居中
• 不论是否设置padding都可居中（在不使用box-sizing属性的前提下）
• 内容块可以被重绘
• 完美支持图片居中

缺点：

• 必须声明高度（查看可变高度Variable Height）
• 建议设置overflow:auto来防止内容越界溢出（查看溢出Overflow）
• 在Windows Phone设备上不起作用

浏览器兼容性：

Chrome,Firefox, Safari, Mobile Safari, IE8-10

6、不确定宽高，绝对定位百分数

.parent_div {
    position: relative;
    margin: auto;
    width: 600px;
    height: 500px;
    border: 3px solid #f00;
}
.child_div {
    position: absolute;
    left: 30%;
    right: 30%;
    top: 15%;
    bottom: 15%;
    border: 3px solid #00f;
}

 这种不确定宽高的居中，较为灵活。只需要保证left和right的百分数一样就可以实现水平居中，保证top和bottom的百分数一样就可以实现垂直居中。

7、负边距Negative Margins

.parent_div {
    position: relative;
    margin: auto;
    width: 600px;
    height: 300px;
    border: 3px solid #f00;
}
.child_div {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px -100px;
    width: 200px;
    height: 200px;
    border: 3px solid #00f;
}

Margin-left：-(width + padding)/2，不使用box-sizing: border-box时，如果有padding，要计算padding ,如果没有padding，就是-width/2；

Margin-top：-(height + padding)/2，不使用box-sizing: border-box时，如果有padding，要计算padding ,如果没有padding，就是-height/2；

这是唯一在IE6-IE7上也表现良好的方法。

优点：

• 良好的跨浏览器特性，兼容IE6-IE7
• 代码量少

缺点：

• 不能自适应，不支持百分比尺寸和min-/max-属性设置
• 内容可能溢出容器
• 边距大小和padding与是否定义box-sizing: border-box有关，计算需要根据不同情况

8、弹性盒子Flexbox

.parent_div {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin: auto;
    width: 600px;
    height: 500px;
    border: 3px solid #f00;
}
.child_div {
    width: 200px;
    height: 200px;
    border: 3px solid #00f;
}

这是CSS布局未来的趋势。Flexbox是CSS3新增属性，设计初衷是为了解决像垂直居中这样的常见布局问题。

优点：

• 内容块的宽高任意，优雅的溢出
• 可用于更复杂高级的布局技术中

缺点：

• IE8/IE9不支持
• Body需要特定的容器和CSS样式
• 运行于现代浏览器上的代码需要浏览器厂商前缀
• 表现上可能会有一些问题

9、变形Transform

.parent_div {
    position: relative;
    margin: auto;
    width: 600px;
    height: 500px;
    border: 3px solid #f00;
}
.child_div {
    position: relative;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    border: 3px solid #00f;
}

内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀。

10、弹层Transform

.parent_div {
    justify-content: center;
    /*子元素水平居中*/    
    align-items: center;
    /*子元素垂直居中*/
    display: -webkit-flex;
    border: 3px solid #00f;
}
.parent_div .child_div {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 640px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    /*visibility: hidden;*/
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    border: 3px solid #f00;
}

11、利用button做外容器，里边的块元素会自动垂直居中，只需要控制一下水平居中就可以达到效果。

<button class="parent_div">
    <div class="child_div">
    水平垂直居中
    </div>
</button>

.parent_div {
    margin:auto;
    width: 600px;
    height: 500px;
    border: 3px solid #f00;
}
.child_div {
    margin: 0 auto;
    width: 200px;
    height: 200px;
    border: 3px solid #00f;
}

 四、jquery实现元素水平垂直居中

$(function(){ 
    $(window).resize(); 
});
$(window).resize(function(){ 
    $(".div").css({ 
        position: "absolute", 
        left: ($(window).width() - $(".div").outerWidth())/2, 
        top: ($(window).height() - $(".div").outerHeight())/2 
    });        
});

五、css实现浮动元素的居中

设置容器的浮动方式为相对定位，确定容器的宽高，设置层的外边距。