关于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%);
}

css-centered相关推荐

css点滴知识汇集（转+编辑）
转载自:http://www.w3cplus.com/solution/waterdrop/waterdrop.html CSS布局大全 Layout Gala- 这个网站收集了40多个专业的CSS布 ...
用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟
思路:实现起来最麻烦的事实上是水平居中和垂直居中,当中垂直居中是最麻烦的. 考虑到浏览器兼容性,网上看了一些资料,发如今页面中垂直居中确实没有什么太好的办法. 于是就採用了position:fixed ...
CSS 布局:40个教程、技巧、例子和最佳实践
前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...
div块内的CSS中心文本（水平和垂直）
我将div设置为display:block ( height和width 90px ),并且里面有一些文本. 我需要文本在垂直和水平方向上居中对齐. 我尝试了text-align:center ,但是 ...
html5 css 万能的position大法
水平居中的text-align:center 和 margin:0 auto 这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被float ...
如何实现CSS居中？–CSS居中常用方法
文章参考:http://css-tricks.com/centering-css-complete-guide/?utm_source=ourjs.com(翻译不当之处请谅解) 一.水平居中 1.内联 ...
YUI Grid CSS的优雅设计（转）
最近加入了一个GAE的项目cpedialog,该项目的前端布局采用YUI Grid CSS,我就顺便看了一下,YUI Grid CSS设计的非常优雅,思路非常清晰,打算使用CSS+DIV做网站布局的兄 ...
文计笔记７：HTML与CSS
0 HTML/CSS/JavaScript基础知识和示例 HTML https://www.w3school.com.cn/html/index.asp CSS https://www.w3schoo ...
兼容IE各版本的纯CSS二级下拉菜单
这是一个标准的CSS下拉菜单制作教程,有针对目前流行的IE6/IE7/IE8不同版本的CSS代码,因此可以在IE之间完全兼容,不过其它的浏览器像火狐/GG浏览器之类的没有测试,如果兼容IE8的话,那么 ...
CSS垂直居中网页布局实现的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

css-centered