在项目中经常会遇到设置元素水平垂直居中的需求。而且具体的场景也不同,所以将个人总结的方法做个汇总,希望对浏览者有用。

以下所举的例子都以一个html为准,这里规定好一些公用样式。

body {
background-color: #efefef;
}
main {
background-color: #fff;
padding: 10px;
margin:10px 0px;
}
main div {
background-color: #aaf;
}

水平居中

1 相对块级父元素,可将子级设置成行内或者行内块元素,父元素设置text-align属性

举例如下:

.parent1 {
text-align:center;
}
.child1 {
display:inline|inline-block;
}

2 若父子都为块级元素,则给子元素宽度值之后,将margin:auto

<main class="parent2">
<div class="child2">我是孩子2,我要水平居中</div>
</main>
.child2 {
width:60%;
margin:auto;
}

3 如果是多个子元素水平居中,则有两种方法

3.1 将子级设置成行内或者行内块元素,父元素设置text-align属性
3.2 将父元素设置display:flex
<main class="parent4">
<div class="child4">我是孩子4,我要水平居中</div>
<div class="child4">我是孩子4,我要水平居中</div>
<div class="child4">我是孩子4,我要水平居中</div>
</main> .parent4 {
display: flex;
justify-content: center;
}
.child4 {
margin:10px;
}

垂直居中

1 除了设置固定的padding值使其看起来垂直居中之外,还可用line-height

将line-height和height的值设置为相同值,

<main class="parent5">
<div class="child5">我是孩子5,我要垂直居中</div>
</main>
.child5 {
height:50px;
line-height: 50px;
}

2 如果是多行的,可以像table那样,按照table cell 模式显示,配合vertical-align

<main class="parent6">
<div class="child6">我是孩子6,我要垂直居中</div>
<div class="child6">我是孩子6,我要垂直居中</div>
<div class="child6">我是孩子6,我要垂直居中</div>
</main>
.parent6 {
display: table;
}
.child6 {
display: table-cell;
border:2px solid #000;
vertical-align: middle;
}

3 通过绝对定位

<main class="parent7">
<div class="child7">我是孩子7,我要垂直居中</div>
</main>
/*如果知道子元素宽高*/
.parent7 {
position: relative;
height: 100px;
}
.child7 {
position: absolute;
top:50%;
height:60px;
margin-top:-30px;
}
/*如果不知道子元素宽高*/
.parent7 {
position: relative;
height: 100px;
}
.child7 {
position: absolute;
top:50%;
transform: translateY(-50%);
}

4 使用flex

<main class="parent8">
<div class="child8">我是孩子8,我要垂直居中</div>
</main>
.parent8 {
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}

水平和垂直都居中

1 使用绝对定位

<main class="parent9">
<div class="child9">我是孩子9,我要水平垂直居中</div>
</main>
/*如果不知道子元素宽高*/
.parent9 {
position: relative;
height: 150px;
}
.child9 {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
/*如果知道子元素宽高*/
.parent9 {
position: relative;
height: 150px;
}
.child9 {
position: absolute;
top:50%;
left:50%;
height:60px;
width:100px;
margin-left:-50px;
margin-top:-30px;
}

2 使用flex

.parent10 {
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.child10 {
margin: auto;
}

3 除此之外,还可以将上述的水平和垂直分别居中的方法,尝试着搭配。当然,应该还有其它方法,待发现。

上述结果输出截图



css 水平垂直居中的方法总结的更多相关文章

  1. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...

  2. 介绍一种css水平垂直居中的方法(非常好用!)

    这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...

  3. css水平垂直居中的方法与 vertical-align 的用法

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. 已知元素宽度 方法一:已知宽高,可以用position定位 + margin负值的方法 : 绝对定位 ...

  4. CSS水平垂直居中常见方法总结

    1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是行内元素吧,行内元素和块元素的区 ...

  5. CSS水平垂直居中常见方法总结2

    1.文本水平居中line-height,text-align:center(文字)元素水平居中 margin:0 auo 方案1:position 元素已知宽度 父元素设置为:position: re ...

  6. [css]水平垂直居中的方法

    1.top:cale(50% - 2rem); left:cale(50% - 2rem);

  7. 53.CSS---CSS水平垂直居中常见方法总结

    CSS水平垂直居中常见方法总结 1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是 ...

  8. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  9. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

随机推荐

  1. [NPM] Update published npm packages using np

    When we want to update our package we need to do a few things: pull latest from our git remote, bump ...

  2. @property 和@synthesize

    xcode4.4之后,@property包括了@synthesize的功能. 这是编译器的升级. @property有几个作用:1)默认生成一个私有成员变量,并有一个带下划线的别名如_age   2) ...

  3. J2SE核心开发实战(一)——认识J2SE

    认识J2SE 一.课程简单介绍 在本章学习開始前,你应该具备一些Java的基础知识. 我们将在本章来认识J2SE,并复习一下前面学过的面向对象的相关知识. 注:全部的蓝色文字都是带超链接的,这些链接是 ...

  4. 好玩的 emoji

    emoji 就是表情符号,来自日语词汇"絵文字"(假名为"えもじ",读音即emoji).emoji 表情符号大全,都在这里(手机/电脑都可以复制):www.fu ...

  5. 数据类型的提升(promotion)

    假如参与运算的数据类型不同或者取值范围过小,编译器会自动将其转换为相同的类型,这个类型就叫数据类型的提升(promotion). 1. C++ 语言环境的规定 unsigned char a = 17 ...

  6. Flume Sinks官网剖析(博主推荐)

    不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) Flume Channel Selectors官网剖析(博主推荐) 一切来源于f ...

  7. css 0.5px

    1. 利用css3新属性scale(好用推荐) 其实现的关键就是利用before或after伪元素,宽高同时设为200%,然后再缩放0.5,自然就是0.5px了 代码如下: div { positon ...

  8. Java Web学习总结(15)——JSP指令

    一.JSP指令简介 JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. 在JSP 2.0规范中共定义了三个指令: pa ...

  9. Android车载导航的一些困境

    车载导航从最初的用解码芯片,过渡到用WinCE系统,已经形成了一个较大的产业.车载导航使用上的一些大原则,基本上被固定了下来.如今WinCE走到了尽头,Android车载导航開始发力,但由于Andro ...

  10. uvaoj-1595:symmetry

    1595 - Symmetry The figure shown on the left is left-right symmetric as it is possible to fold the s ...