欢迎光临
我的个人博客网站

CSS样式中的各种居中方式


1、水平居中

将margin-left和margin-right属性设置为auto,从而达到水平居中的效果。

代码:

margin:0 auto;

2、文字水平垂直居中

利用line-height设为height的一样

代码:

line-height: 200px;/*垂直居中关键*/

height: 200px;

3、利用padding和background-clip配合实现div的水平垂直居中

通过backgroun-clip设置为content-box,将背景裁剪到内容区外沿,再利用padding设为外div减去内div的差的一半

 1 .parent{  2  margin:0 auto;  3  width:200px;  4  height:200px;  5  background-color:red;  6 }  7 .children {  8  width: 100px;  9  height: 100px; 10  padding: 50px; 11  background-color: black; 12  background-clip:content-box;/*居中的关键*/

4、absolute定位

 其中的margin中的值为该div宽度的一半

 利用position:absolute搭配top,left 50%,再将margin设为负值也可以对div进行水平垂直居中

 1 .parent {  2  position:relative;  3  margin:0 auto;  4  width:200px;  5  height:200px;  6  background-color:red;  7 }  8 .children {  9  position:absolute;  10  left:50%;  11  top:50%;  12  margin:-25px 0 0 -25px ; 13  height:50px; 14  width:50px; 15  background-color: black; 16 }

5、text-align居中

将子div的display设为inline-block。

 1 .parent {  2  text-align:center;  3  margin:0 auto;  4  width:200px;  5  height:200px;  6  background:red;  7 }  8 .children {  9  positiona;absolute; 10  margin-top:75px; 11  width:50px; 12  height:50px; 13  background: black; 14  display:inline-block;/*使其父元素text-align生效*/ 15 }

 


 

图片居中

1、top

1 position:absolute; 2  right:50%; 3  bottom:50%;

2、transform

不需要定宽度的父div实现图片的水平垂直居中

1 <div class="parent"> 2  3   <div class="children"> 4  5     <div class="children-inline">我是水平垂直居中噢!</div> 6  7   </div> 8  9 </div>

 1 .parent {  2  float: left;  3  width: 100%;  4  height: 200px;  5  background-color: red;  6 }  7 .children {  8  float:left;  9  position:relative; 10  top:50%; 11  left:50%; 12 } 13 .children-inline { 14  position: relative; 15  left: -50%; 16  -webkit-transform : translate3d(0, -50%, 0); 17  transform : translate3d(0, -50%, 0); 18  background-color: black; 19  color:white; 20 }

3、flex水平垂直居中

1 <div class="parent"> 2  3   <div class="children">我是通过flex的水平垂直居中噢!</div> 4  5 </div>

 1 html,body{  2  width: 100%;  3  height: 200px;  4 }  5 .parent {  6  display:flex;  7  align-items: center;/*垂直居中*/  8  justify-content: center;/*水平居中*/  9  width:100%; 10  height:100%; 11  background-color:red; 12 } 13 .children { 14  background-color:blue; 15 }

 

 1 水平居中  2 .center-vertical {  3     position: relative;  4     top: 50%;  5     transform: translateY(-50%);  6 }  7    8    9   10 垂直居中 11 .center-horizontal { 12     position: relative; 13     left: 50%; 14     transform: translateX(-50%);  15 }

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS样式中的各种居中方式
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏