前端 css实现内容居中的N中写法

水平居中

一、使用

margin

进行居中

DOM结构

<div class="container">
  <div class="box"></div>
</div>
           

CSS样式

body {
  margin: 0;
}
.container {
  width: 1000px;
  height: 600px;
  background: #5F9EA0;
}
.box {
  width: 300px;
  height: 200px;
  background: coral;

  margin: 0 auto;
}
           

预览效果

这种方式可以将元素本身相对于父级居中（仅限块级元素，非块级元素可以通过

display: block;

转换成块级）。

二、flex布局

DOM结构和效果和方法一是一样的，其中css修改如下

横向排列

.container {
  width: 1000px;
  height: 600px;
  background: #5F9EA0;
  display: flex;
  justify-content: center;
}
.box {
  width: 300px;
  height: 200px;
  background: coral;
}
           

纵向排列

因为交换了X轴Y轴 所以

justify-content: center;

需要改成

align-items: center;

。

.container {
  width: 1000px;
  height: 600px;
  background: #5F9EA0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box {
  width: 300px;
  height: 200px;
  background: coral;
}
           

flex布局的实现 可以使

div.container

下的所有子元素水平居中对齐。

更多关于flex弹性布局，可以看一下菜鸟教程的这边文章 传送门

三、利用text-align进行居中

DOM结构和效果和方法一还是一样的，css部分进行了修改如下

.container {
  width: 1000px;
  height: 600px;
  background: #5F9EA0;
  text-align: center;
}
.box {
  width: 300px;
  height: 200px;
  background: coral;
  display: inline-block;
}
           

利用

text-align: center

对文本居中的原理，将块级元素转化为

inline-block

，从而实现元素的居中。

四、脱离文档流 相对父级绝对居中

DOM不变 效果同上

方法1

.container {
  position: relative;
  width: 1000px;
  height: 600px;
  background: #5F9EA0;
}
.box {
  position: absolute;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  height: 200px;
  background: coral;
}
           

方法2

.container {
  position: relative;
  width: 1000px;
  height: 600px;
  background: #5F9EA0;
}
.box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 200px;
  background: coral;
}
           

第一种方法的想法是在

left: 50%;

之后利用

margin-left

返回自身一般的宽度使其居中，但是在盒模型有

padding/border

时各浏览器显示可能会不一致，也会增加自身宽度的计算难度。还有就是元素本身可能就是不定宽的。

第二种方法是在第一种方法上的优化利用

transform: translateX(-50%)

，弥补了第一种方法的不足。但是在IE8及以下版本浏览器中不受支持。

这种脱离文档流居中的优势在于可以超出父级 高度且不影响父级。

五、相对浏览器绝对居中

这种居中的实现和上面一种方法相同，只需要修改需对其元素的

position

为

fixed

即可。

DOM结构

CSS样式

.box {
  position: fixed;
  width: 300px;
  height: 200px;
  background: coral;
  left: 50%;
  transform: translateX(-50%);
}
           

六、浮动实现居中

原理和方法四一样，不推荐这么用，一般常用的方法是一、二、四。

DOM结构

CSS样式

.box {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  float: left;
  width: 300px;
  height: 200px;
  background: coral;
}
           

未完待续…