html设置元素中心,CSS技巧:让任何元素位于中间

CSS技巧:让任何元素位于中间

在CSS中让元素位于中间位置是非常让人烦心的，也是对CSS普遍抱怨的一个问题之一，为什么做起来这么难？问题不是做起来难，而是有很多实现方式，取决于不同的场景，难以确切知道哪个解决方案适合哪个场景。

横向中间

首先CSS中需要被定位中间的有两个元素，一个是明面上看得见的文本或链接元素，一个是背后看不见的块block，一般我们使用block块作为一个区域布局，在这块内加入各种元素。

如果是一个块需要定位在页面中间：

margin: 0 auto;

也就是让margin-left和 margin-right 设为 auto。也是设置宽度，否则宽度会撑满，不会位于中间了。

如果是对文本或链接位于中间:

text-align: center;

垂直中间

让任何元素位于垂直方向的中间部位：

html, body {

height: 100 %;

margin: 0;

}

body {

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

display: -webkit-flex;

display: flex;

}

上面CSS代码能够让任何元素定位在垂直中间。

.parent {

display: flex;

flex-direction: column;

justify-content: center;

}

横向纵向都位于中央

使用flexbox很简单：

.parent {

display: flex;

justify-content: center;

align-items: center;

}