码迷,mamicode.com
首页 > Web开发 > 详细

[CSS]水平垂直居中方案

时间:2020-02-28 13:36:26      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:身高   block   ems   ext   常用   idt   relative   latex   针对   

简单总结一下常用的水平垂直居中方案

 

直接在父级元素设置 text-alignline-height ,针对未浮动的行内元素

1 <div class="box">
2     <span class="item">我是span标签</span>
3  </div>
1 .box {
2       width: 600px;
3       height: 400px;
4       margin: 50px auto;
5       border: 1px solid red;
6 
7       line-height: 400px;
8       text-align: center;
9     }

 

在父级设置 line-height ,在本身设置 margin 值和 transform 属性,针对已浮动的行内元素

1 .item {
2       float: left;
3       margin-left: 50%;
4       transform: translateX(-50%);
5     }

  

通过定位,这种方案是比较常用的手段,不区分是否浮动,前提是父级有宽高。

  块级元素在父级设置 position: relative;

1 .box {
2       width: 600px;
3       height: 400px;
4       margin: 50px auto;
5       border: 1px solid red;
6       position: relative;
7     }

  在本身设置 position: absolute;

 1 .item {
 2       display: block; 
 3       width: 100px;
 4       height: 100px;
 5       color: white;
 6       background: #000;
 7 
 8       /* 方案一 */
 9       position: absolute;
10       left: 50%;
11       top: 50%;
12       margin-left: -50px; /* 值为本身宽度的一半 */
13       margin-top: -50px;  /* 值为本身高度的一半 */
14       /* transform: translate(-50%, -50%);  可以代替margin,IE9以下不支持 */
15 
16       /* 方案二 */
17       top: 0;
18       left: 0;
19       bottom: 0;
20       right: 0;
21       margin: auto; 
22     }

  

  行内元素,父级设置和上面一样,本身设置如下:

1 .item {
2       position: absolute;
3       position: absolute;
4       left: 50%;
5       top: 50%;
6       transform: translate(-50%, -50%);
7     }

 

推荐方案:flex布局

 1 .box {
 2       width: 600px;
 3       height: 400px;
 4       margin: 50px auto;
 5       border: 1px solid red;
 6 
 7       display: flex;
 8       justify-content: center;
 9       align-items: center;
10     }

 

[CSS]水平垂直居中方案

标签:身高   block   ems   ext   常用   idt   relative   latex   针对   

原文地址:https://www.cnblogs.com/feng-fengfeng/p/12376701.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!