https://www.cnblogs.com/notepades/p/6178510.html https://www.cnblogs.com/notepades/p/6178510.html
水平居中: 行内元素解决方案
只需要把行内元素包裹在一个属性 display 为 block 的父层元素中, 并且把父层元素添加如下属性即可:
.parent {text-align:center;}
水平居中: 块状元素解决方案
- .item {
- /* 这里可以设置顶端外边距 */
- margin: 10px auto;
- }
水平居中: 多个块状元素解决方案
将元素的 display 属性设置为 inline-block, 并且把父元素的 text-align 属性设置为 center 即可:
- .parent {
- text-align:center;
- }
水平居中: 多个块状元素解决方案 (使用 flexbox 布局实现)
使用 flexbox 布局, 只需要把待处理的块状元素的父元素添加属性 display:flex 及 justify-content:center 即可:
- .parent {
- display:flex;
- justify-content:center;
- }
垂直居中: 单行的行内元素解决方案
- .parent {
- background: #222;
- height: 200px;
- }
- /* 以下代码中, 将 a 元素的 height 和 line-height 设置的和父元素一样高度即可实现垂直居中 */
- a {
- height: 200px;
- line-height:200px;
- color: #FFF;
- }
垂直居中: 多行的行内元素解决方案
组合使用 display:table-cell 和 vertical-align:middle 属性来定义需要居中的元素的父容器元素生成效果, 如下:
- .parent {
- background: #222;
- width: 300px;
- height: 300px;
- /* 以下属性垂直居中 */
- display: table-cell;
- vertical-align:middle;
- }
垂直居中: 已知高度的块状元素解决方案
- .item{
- top: 50%;
- margin-top: -50px; /* margin-top 值为自身高度的一半 */
- position: absolute;
- padding:0;
- }
水平垂直居中: 已知高度和宽度的元素解决方案 1
这是一种不常见的居中方法, 可自适应, 比方案 2 更智能, 如下:
- .item{
- position: absolute;
- margin:auto;
- left:0;
- top:0;
- right:0;
- bottom:0;
- }
水平垂直居中: 已知高度和宽度的元素解决方案 2
- .item{
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -75px; /* 设置 margin-left / margin-top 为自身高度的一半 */
- margin-left: -75px;
- }
水平垂直居中: 未知高度和宽度元素解决方案
- .item{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%); /* 使用 CSS3 的 transform 来实现 */
- }
水平垂直居中: 使用 flex 布局实现
- .parent{
- display: flex;
- justify-content:center;
- align-items: center;
- /* 注意这里需要设置高度来查看垂直居中效果 */
- background: #AAA;
- height: 300px;
- }10.html] https://www.cnblogs.com/notepades/p/6178510.html[/url ]
来源: http://www.qdfuns.com/article/16270/f33f7c5272f5bdfb9cc89f90ef70cc18.html