css 水平垂直居中的方法总结
在项目中经常会遇到设置元素水平垂直居中的需求。而且具体的场景也不同,所以将个人总结的方法做个汇总,希望对浏览者有用。
以下所举的例子都以一个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 水平垂直居中的方法总结的更多相关文章
- CSS水平垂直居中的方法
原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...
- 介绍一种css水平垂直居中的方法(非常好用!)
这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...
- css水平垂直居中的方法与 vertical-align 的用法
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. 已知元素宽度 方法一:已知宽高,可以用position定位 + margin负值的方法 : 绝对定位 ...
- CSS水平垂直居中常见方法总结
1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是行内元素吧,行内元素和块元素的区 ...
- CSS水平垂直居中常见方法总结2
1.文本水平居中line-height,text-align:center(文字)元素水平居中 margin:0 auo 方案1:position 元素已知宽度 父元素设置为:position: re ...
- [css]水平垂直居中的方法
1.top:cale(50% - 2rem); left:cale(50% - 2rem);
- 53.CSS---CSS水平垂直居中常见方法总结
CSS水平垂直居中常见方法总结 1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是 ...
- CSS水平垂直居中总结
行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
随机推荐
- [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 ...
- @property 和@synthesize
xcode4.4之后,@property包括了@synthesize的功能. 这是编译器的升级. @property有几个作用:1)默认生成一个私有成员变量,并有一个带下划线的别名如_age 2) ...
- J2SE核心开发实战(一)——认识J2SE
认识J2SE 一.课程简单介绍 在本章学习開始前,你应该具备一些Java的基础知识. 我们将在本章来认识J2SE,并复习一下前面学过的面向对象的相关知识. 注:全部的蓝色文字都是带超链接的,这些链接是 ...
- 好玩的 emoji
emoji 就是表情符号,来自日语词汇"絵文字"(假名为"えもじ",读音即emoji).emoji 表情符号大全,都在这里(手机/电脑都可以复制):www.fu ...
- 数据类型的提升(promotion)
假如参与运算的数据类型不同或者取值范围过小,编译器会自动将其转换为相同的类型,这个类型就叫数据类型的提升(promotion). 1. C++ 语言环境的规定 unsigned char a = 17 ...
- Flume Sinks官网剖析(博主推荐)
不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) Flume Channel Selectors官网剖析(博主推荐) 一切来源于f ...
- css 0.5px
1. 利用css3新属性scale(好用推荐) 其实现的关键就是利用before或after伪元素,宽高同时设为200%,然后再缩放0.5,自然就是0.5px了 代码如下: div { positon ...
- Java Web学习总结(15)——JSP指令
一.JSP指令简介 JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. 在JSP 2.0规范中共定义了三个指令: pa ...
- Android车载导航的一些困境
车载导航从最初的用解码芯片,过渡到用WinCE系统,已经形成了一个较大的产业.车载导航使用上的一些大原则,基本上被固定了下来.如今WinCE走到了尽头,Android车载导航開始发力,但由于Andro ...
- uvaoj-1595:symmetry
1595 - Symmetry The figure shown on the left is left-right symmetric as it is possible to fold the s ...