css（css3）实现垂直水平居中的那些事

都说“金三银四求职季”，本人也选择了在这个时候成为这浩浩荡荡的求职大军中的一员，几次面试下来，发现面试官都爱问的一个问题就是：“说说垂直水平居中都有哪些实现方式吧？”
面试过程巴拉巴拉一大堆，现在终于有时间把这些知识点总结归纳起来，希望能帮自己巩固下，也希望可以帮到有需要的小伙伴~大神路过求轻喷求包涵。
言归正传，既然说到垂直水平居中，那现在咱们就来好好归纳下：“水平居中”、“垂直居中”以及“垂直水平都居中” 到底利用css或者css3是怎么实现的。
一、css实现水平居中
(1)行内元素：在其父元素上设置text-align:center;
<p class="align" style="text-align: center;width: 300px;border: 1px solid #666666;"><a href="#">测试行内元素的水平居中效果</a></p>
(2)单个块级元素（也可以运用到给一个浮动的元素设置）：设置width以及margin:0 auto
<div class="margin" style="width: 200px;background: aqua;margin: 10px auto;height: 100px;"></div>
(3)多个块级元素实现水平居中：
①为这些块级元素设置display:inline-block属性，其父元素设置：text-align:center （这块的代码就不贴出了）
②利用flexbox布局:在这些块级元素的父元素上设置display:flex;justify-content:center
注意：一般的浏览器设置：display:-webkit-flex;display：flex;对于IE浏览器需设置display：-ms-flexbox
css样式：
.flexbox div{width: 100px;height: 100px;background: pink;margin: 0px 20px;}
<div class="flexbox">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
二、css实现垂直居中(1)单行的行内元素设置子元素的line-height等于父元素的height,
<p class="line-he" style="width: 300px;height: 200px;color: #666;border: 1px solid #00FFFF;"><a style="height: 200px;line-height: 200px;">这是测试单行的行内元素的垂直居中</a></p>
(2)多行的行内元素：
① 针对非IE浏览器组合使用table-cell和vertical-align：middle
② 针对IE浏览器利用font-size 本例中的*针对的是IE6-7浏览器（对于IE的各种hack我自己掌握的也不是很全面，要补一补这块的知识了）
<style>
.parent{
width:200px;height:200px;border:1px solid black;
line-height:200px;
display: table-cell;vertical-align:middle;
*display: block;
*font-size:175px;
*font-family:Arial;}
.iemiddle img{vertical-align: middle;}
</style>
<div class="parent">
<img src="img/HBuilder.png"/>
</div>
(3)已知子元素（块级元素例如:div）的高度和宽度利用position：absolute（注:如果该元素的高度和宽度是动态添加的，可以利用jq动态移动margin-top以及margin-left）
①已知div的高度和宽度：在子元素上设置position：absolute；top:50%;left:50%;(因为子元素的左右上下移动是以该元素的左上角的为顶点的，因此需要再利用margin-top和margin-left)再稍微调整；
②需要根据子元素的动态宽高进行动态移动的利用jq
$(window).resize(function(){
$(".mydiv").css({
position: "absolute",
left: ($(window).width() - $(".mydiv").outerWidth())/2,
top: ($(window).height() - $(".mydiv").outerHeight())/2
});
});
此外在页面载入时，就需要调用resize()。
$(function(){
$(window).resize();
});
<style>
.parent{position: relative;width: 300px;height: 300px;border: 1px solid plum;}
.chlid{width: 100px;height: 100px;background: red;position: absolute;top: 50%;margin-top: -50px;left: 50%;margin-left: -50px;}
</style>
<div class="parent">
<div class="chlid"></div>
</div>
(4)利用table实现垂直居中 table元素作为父级元素添加 align="middle"：
<table class="table" style="width: 600px;height: 200px;border: 1px solid #00FFFF;">
<tr >
<td align="middle">
<div>
测试垂直居中
测试垂直居中
测试垂直居中
测试垂直居中
</div>
</td>
</tr>
</table>
三、css实现垂直水平居中
(1)单行的行内元素
① 图片元素在父元素上设置 display:table-cell(重点) text-align：center vertical-align:middle
②文字在父元素上设置text-align:center 自身设置line-height:为父元素的高度 height：父元素的高度
③图片与文字都有父元素设置display:table-cell vertical-align:center;text-algin:center;

(2) 块级元素
①单个块级元素（绝对定位+nativemargin）：父元素设置position：relative 自身设置position:absolute;top:50%;left:50%;margin-top:-（为自身的高度的一般;margin-left:-(为自身宽度的一半) ；

四、利用css3实现垂直水平居中
(1)css3实现子元素不定宽高水平垂直居中
关键点： 1.justify-content:center;//让子元素水平居中
2. align-items:center;//让子元素垂直居中
3. display:-webkit-flex;
flex布局实现水平居中 ①（适用于块级元素与行内元素的单个元素或多个）实现水平居中：在父元素上设置 display:flex justify-content:center

(2)利用transform实现垂直水平居中
关键点：1.transform:translate(-50%,-50%)
2.position:relative;top:50%;left:50%；
<style>
.box{
display: flex;
justify-content: center;
background: #0099cc
}
.box h1{
color: #FFF;
font-size:.5rem;
border: 1px dashed #fff;
padding: 1rem;
font-weight: normal;
}

.box1{
display: flex;
justify-content: center;
width: 100%;
background: #0099cc;
margin-top: 2rem;
}
.box1 h1{
font-size: 1rem;
padding: 1rem;
border: 1px dashed #FFF;
color: #FFF;
font-weight: normal;
}

.box2{
display: flex;
width: 650px;
height: 15rem;
align-items:center;
background: #0099cc;
margin-top:20px ;
}
.box2 h1{
font-size: 1rem;
padding: 1rem;
border: 1px dashed #FFF;
color: #FFF
}
.parent {
width: 200px;
height: 200px;
background-color: black;
}
.child {
position: relative;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
background-color:red;
-webkit-transform: translate(-50%, -50%) ;
-moz-transform: translate(-50%, -50%) ;
-ms-transform: translate(-50%, -50%) ;
-o-transform: translate(-50%, -50%) ;
transform: translate(-50%, -50%) ;
}
</style>
<div class="box">
<h1>justify-content属性实现单个元素水平居中</h1>
</div>
<div class="box1">
<h1>justify-content实现多个元素水平居中</h1>
<h1>justify-content实现多个元素水平居中</h1>
<h1>justify-content实现多个元素水平居中</h1>
</div> <div class="box2"> <h1> align-items实现元素垂直居中</h1> <h1>align-items实现元素垂直居中</h1>
<h1>align-items实现元素垂直居中</h1>
</div> <div class="parent"> <div class="child">利用css3实现垂直水平居中</div> </div>

css（css3）实现垂直水平居中的那些事相关推荐

CSS实现DIV垂直水平居中
CSS实现DIV垂直水平居中在页面设计中,很多地方都需要div的垂直水平居中,在前端开篇的学习中,也是使用较多的地方,所以我整理了三种方法帮助大家去解决问题,代码可直接使用,仅供参考学习. 方法方 ...
html body不定宽居中,纯CSS实现元素垂直水平居中-非固定宽度
这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现 ...
css 怎么设置盒子水平居中,用一段css实现盒子垂直水平居中方法(8种)-案例
效果图 - 在线案例 css3中的属性:transform: translate(x,y) .box { width: 100px; height: 100px; background: orange ...
关于css设置元素垂直水平居中的问题
第一种: 利用定位属性实现,但需要知道元素的宽高 <div class="box"></div><style>.box{weight:200px ...
CSS里各种垂直水平居中方式的基础用法
首先,依旧是概念.介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置. 行内元素(又叫内联元素inl ...
css图片如何垂直水平居中设置
css设置图片垂直居中的方法: 一.使用flex实现垂直居中利用css flex实现垂直居中,有些浏览器可能不兼容flex. 首先要创建一个包裹着图片的div元素,然后定义基础属性. 以下图片img ...
html元素垂直水平居中显示,关于css:html-元素垂直水平居中
一. 不定宽高元素程度垂直居中 1.transform: translate() 程度垂直居中 .wrapper{ background-color: #eee; height:200px; } .c ...
css面试题实现元素垂直水平居中-包括未知宽高的元素五种回答
css实现元素垂直水平居中-包括未知宽高的元素这个一道很经典的面试题,做项目中也常会出现这样的需求. 现在我就用几种比较常用的方法.兼容性也列出来. 第一种已知宽高(定位加负边距解决)兼容到IE6 ...
CSS 基础知识之垂直水平居中
最近想转行前端面试时被教育了 ,关于css设置水平垂直居中这个应该是基础的基础了回答不上来确实还是有点尴尬的我第一时间就想到了最简单的针对 div设置 margin 0 auto ; 实操一 ...

css（css3）实现垂直水平居中的那些事

css（css3）实现垂直水平居中的那些事相关推荐

最新文章

热门文章