css-centered

关于css水平和垂直居中

网上关于解决这个问题遍地都是，索性省的百度，自己理一下，其中也有一些新增加的属性和属性值

1、width:fill-available

width:fill-available比较好理解，比方说，我们在页面中扔一个没有其他样式的<div>元素，
则，此时，该<div>元素的width表现就是fill-available自动填满剩余的空间。
也就是我们平常所说的盒模型的margin,border,padding的尺寸填充。
出现fill-available关键字值的价值在于，我们可以让元素的100%自动填充特性不仅仅在block水平元素上，
其他元素，例如，我们一直认为的包裹收缩的inline-block元素上：
div { display:inline-block; width:fill-available; }
此时，元素兼具了块状元素的自动填充特性以及内联元素的定位对齐等特性。
于是，（例如）我们就可以直接使用line-height让一个块状表现的元素垂直居中。

CSS代码：.box {    width: 70%;    height: 200px; line-height: 200px;    padding: 10px; margin: 10px auto;    background-color: #f0f3f9;    resize: horizontal;    overflow: hidden;}.fill-available {    display: inline-block;    line-height: 20px;    padding: 20px;    background-color: #cd0000;    color: #fff;    vertical-align: middle;    width: -webkit-fill-available;    width: -moz-fill-available;    width: -moz-available;    /* FireFox目前这个生效 */    width: fill-available;}HTML代码：<strong>width: fill-available;</strong><div class="box">    <p class="fill-available">      width:fill-available可以让元素的宽度表现为默认的block水平元素的尺寸表现。<br>      但这里实际上是display:inline-block水平的，<br>      于是，我们可以保证宽度满尺寸自适应的同时使用line-height实现近似的垂直居中效果。    </p></div>

2、width:max-content

max-content的行为表现可以这么理解，假设我们的容器有足够的宽度，足够的空间，此时，所占据的宽度是就是max-content所表示的尺寸。

CSS代码：.box {    background-color: #f0f3f9;    padding: 10px;    margin: 10px auto 20px;    overflow: hidden;}.inline-block {    display: inline-block;}.max-content {    width: -webkit-max-content;    width: -moz-max-content;    width: max-content;    }HTML代码：<strong>display:inline-block;</strong><div class="box inline-block">    <img src="mm1.jpg">    <p>display:inline-block具有收缩特性，但是，当（例如这里的）描述文字超过一行显示的时候，    其会这行，不会让自身的宽度超过父级容器的可用空间的，但是，width:max-content就不是酱样子哦咯！    表现得好像设置了white-space:nowrap一样，科科！</p></div><strong>width: max-content;</strong><div class="box max-content">    <img src="mm1.jpg">    <p>display:inline-block具有收缩特性，但是，当（例如这里的）描述文字超过一行显示的时候，    其会这行，不会让自身的宽度超过父级容器的可用空间的，但是，width:max-content就不是酱样子哦咯！    表现得好像设置了white-space:nowrap一样，科科！</p></div>

3、width:min-content

min-content宽度表示的并不是内部那个宽度小就是那个宽度，而是，采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。

CSS代码：.box {    background-color: #f0f3f9;    padding: 10px;    margin: 10px 0 20px;    overflow: hidden;}.inline-block {    display: inline-block;}.min-content {    width: -webkit-min-content;    width: -moz-min-content;    width: min-content;    }HTML代码：<strong>display:inline-block;</strong><div class="box inline-block">    <img src="mm1.jpg">    <p>display:inline-block具有收缩特性，但这里宽度随文字。而width:min-content随图片。</p></div><strong>width: min-content;</strong><div class="box min-content">    <img src="mm1.jpg">    <p>display:inline-block具有收缩特性，但这里宽度随文字。而width:min-content随图片。</p></div>

4、width:fit-content

width:fit-content也是应该比较好理解的，“shrink-to-fit”表现，换句话说，和CSS2.1中的float, absolute, inline-block的尺寸收缩表现是一样的。
OK，然后，有小伙伴会疑问，既然跟很多CSS声明有一样的表现，那为什么还要再弄个新东西呢？
就拿水平居中效果举例，首先浮动肯定不行，因为只有左浮动和右浮动；绝对定位压根不占据空间，普通流中根本无法应用，而inline-block需要父级使用text-align:center，而本身可能还需要text-align:left略烦。
而width:fit-content可以没有这些烦恼，因为，width:fit-content可以实现元素收缩效果的同时，保持原本的block水平状态，于是，就可以直接使用margin:auto实现元素向内自适应同时的居中效果了。

CSS代码：.box {    background-color: #f0f3f9;    padding: 10px;    /* 这里左右方向是auto */    margin: 10px auto 20px;    overflow: hidden;}.inline-block {    display: inline-block;}.fit-content {    width: -webkit-fit-content;    width: -moz-fit-content;    width: fit-content;    }HTML代码：<strong>display:inline-block;</strong><div class="box inline-block">    <img src="mm1.jpg">    <p>display:inline-block居中要靠父元素，而width:fit-content直接margin:auto.</p></div><strong>width: fit-content;</strong><div class="box fit-content">    <img src="mm1.jpg">    <p>display:inline-block居中要靠父元素，而width:fit-content直接margin:auto.</p></div

5、水平居中

内联元素（inline or inline-*）居中?
你可以让他相对父级块级元素居中对齐

.father {  text-align: center;}

块级元素（block level）居中?

你可以通过设置margin-left和margin-right为auto让它居中（同时还要设置width，否则它就会承满整个容器，无法看出居中效果）。

.children {  margin: 0 auto;}

如果有很多块级元素呢？
如果你有很匀块级元素需要水平居中成一行，你最好使用一个不同的display类型。这是一个使用inline-block和flex的例子。

HTML代码：<main class="inline-block-center">  <div>    I'm an element that is block-like with my siblings and we're centered in a row.  </div>  <div>    I'm an element that is block-like with my siblings and we're centered in a row.     I have more content in me than my siblings do.  </div>  <div>    I'm an element that is block-like with my siblings and we're centered in a row.  </div></main><main class="flex-center">  <div>    I'm an element that is block-like with my siblings and we're centered in a row.  </div>  <div>    I'm an element that is block-like with my siblings and we're centered in a row.     I have more content in me than my siblings do.  </div>  <div>    I'm an element that is block-like with my siblings and we're centered in a row.  </div></main>CSS代码：body {  background: #f06d06;  font-size: 80%;}main {  background: white;  margin: 20px 0;  padding: 10px;}main div {  background: black;  color: white;  padding: 15px;  max-width: 125px;  margin: 5px;}.inline-block-center {  text-align: center;}.inline-block-center div {  display: inline-block;  text-align: left;}.flex-center {  display: flex;  justify-content: center;}

上面的两种方式都实现了水平居中，但是展现的效果是不一样的。

6、垂直居中

6.1内联元素

6.1.1、有时侯元素可以表现像垂直居中，只是因为它们有相等的上下padding；
6.1.2、如果padding因为某些原因不能用，而且文本不会换行的情况下，你可以使用line-height，让其与height相等去对齐文本；
6.1.3、它是多行的？上下等padding的方式也可以让多行居中，但是如果这方法没用，你可以让这些文字的容器按table cell模式显示，然后设置文字的vertical-align属性对齐，就像talbe那样；

HTML代码：<table>  <tr>    <td>      I'm vertically centered multiple lines of text in a real table cell.    </td>  </tr></table><div class="center-table">  <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p></div>CSS代码：body {  background: #f06d06;  font-size: 80%;}table {  background: white;  width: 240px;  border-collapse: separate;  margin: 20px;  height: 250px;}table td {  background: black;  color: white;  padding: 20px;  border: 10px solid white;  /* default is vertical-align: middle; */}.center-table {  display: table;  height: 250px;  background: white;  width: 240px;  margin: 20px;}.center-table p {  display: table-cell;  margin: 0;  background: black;  color: white;  padding: 20px;  border: 10px solid white;  vertical-align: middle;}

6.2、块级元素

6.2.1、如果你的布局有一个固定高度，你就可以这样垂直居中：

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  height: 100px;  margin-top: -50px; /* 如果没有使用: border-box; 的盒子模型则需要设置这个 */}

6.2.2、元素的高度未知

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  transform: translateY(-50%);}

6.2.3、直接使用flex;

HTML代码：<main>    <div>     I'm a block-level element with an unknown height, centered vertically within my parent.  </div>  </main>CSS代码：body {  background: #f06d06;  font-size: 80%;}main {  background: white;  height: 300px;  width: 200px;  padding: 20px;  margin: 20px;  display: flex;  flex-direction: column;  justify-content: center;  resize: vertical;  overflow: auto;}main div {  background: black;  color: white;  padding: 20px;  resize: vertical;  overflow: auto;}

7、同事水平垂直居中

7.1、元素有固定的宽度和高度

如果元素的宽度和高度是固定的，你需要先绝对居中，然后上移和左移50%的宽度即可，这种方案有极好的跨浏览器支持。

.parent {  position: relative;}.child {  width: 300px;  height: 100px;  padding: 20px;  position: absolute;  top: 50%;  left: 50%;  margin: -70px 0 0 -170px;}

7.2、元素的宽度高度未知

如果你不知道高度和宽度（可变的），你可以使用transofrm属性在两个方向都平移负50%。

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}