水平垂直居中的几种方式-----让爸爸再也不用担心你的学习了

 

1.实现行内元素水平居中（未设置宽度）     

①使用text-align：center 实现行内元素水平居中 /*div内的行内元素均会水平居中*/

1 <style>
2 .demo{
3           text-align: center; 
4         }
5 </style>
Css View Code
1 <div class="demo">
2           我是一只小小鸟
3           <span>我也是一只小小鸟</span>
4 </div>
HTML View Code

②使用line-height行内元素的垂直居中、/*div内得行内元素均会垂直居中*/、/*当然想要既水平居中有垂直居中就两个都加*/

1 <style>
2      .demo{
3           text-align: center; 
4           height: 50px;
5           line-height: 50px;
6          }
7 </style>
Css View Code

 ③使用 width:fit-content 和 margin;auto    支持谷歌 欧朋 火狐 360等

1  <div class="content">
2         <img src="../css3/images/1.jpg" />
3 </div>
4 
5 .content{
6     width: -webkit-fit-content;
7     width: -moz-fit-content;
8      margin: auto;
9     }
View Code

 

 

2.实现块级元素水平居中（以设置宽度）

①使用margin position实现水平垂直居中

1 .demo{
2             height: 400px;
3             width: 200px;
4             border: 2px dashed red;
5             position: absolute;
6             top: 50%;
7             left: 50%;
8             margin:-200px 0 0 -100px;
9           }
Css View Code
1 <div class="demo">1 absolute middle </div>
HTML View Code

②使用margin：0 auto；实现水平居中  /*块级元素的宽度必须设置，如果宽度不够文字将会竖着排列*/ 、、/*相对于父级元素水平居中*/

 1 <style>
 2     .demo{
 3         margin:0 auto ;
 4         width: 200px;
 5          }
 6 </style>
 7 
 8 <body>
 9       <div class="demo">
10           我是一个小鸟
11       </div>
12 </body>
View Code

 

 ③使用 position：absolute，margin：auto实现水平居中

1     .demo{
2           height: 100px;
3           width: 100px;
4           position: absolute;
5           left: 0;
6           right: 0;
7                           /*加上bottom:0;top:0;实现水平垂直同时居中*/
8           margin: auto;
9          }
Css View Code
1       <div class="demo">
2           我是一个小鸟
3       </div>
HTML View Code

3.元素未设置宽度，实现水平居中

①使用table标签配合margin-left:auto，，margin-right:auto实现未设置宽度的块级元素水平居中

  1. 使用table标签（或直接将块级元素设置为display:table;让块级元素具备table的属性），再通过给标签添加样式margin-left，margin-right都为auto；

②使用display和text-align:center;实现未设置宽度的元素水平居中

1      .demo1{
2             display:block;
3             text-align: center;
4           }
View Code

③使用position:absolute，transform实现为设置宽的块级元素水平居中

  1. transform:translateX可以使元素向X(从左向右移动)移动
  2. 同时也可以通过transform:translateY实现元素的垂直居中
  3.  1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>使用</title>
 6         <style>
 7           .demo{
 8             position: absolute;
 9             left:50%;
10             -webkit-transform: translateX(-50%);
11           }
12         </style>
13     </head>
14     <body>
15       <div class="demo">这是一个需要居中的东西</div>
16     </body>
17 </html>
    View Code

     

④使用position:relative加上float or display 是元素变成块级元素，从而是为设置宽度的元素居中

  1. 必须把父级元素设置为行内块元素display:inline-block
  2. 必须是外父元素left相对定位，内(目标元素)设置right相对定位
  3.  1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7           .content{
 8             position: relative;
 9             display: inline-block;
10             left: 50%;
11           }
12             .demo{
13               position: relative;
14               right: 50%;
15             }
16         </style>
17     </head>
18     <body>
19       <span class="content">
20         这是一个行间元素
21         <div class="demo">
22           我认为你说的很对
23         </div>
24       </span>
25     </body>
26 </html>
    View Code

 

⑤CSS3的flex实现水平居中方法，法一

　　.contentdemo{

　　　　display: flex;

　　　　flex-direction: column;

　　　　　　　　}

.　　content{

　　　　align-self:center;

　　　　　　}

⑥CSS3的flex实现水平居中方法，法二

.　　　contentdemo{

　　　　　　display: flex;

　　　　　　　　　　}

.　　content{

　　　　　　margin: auto;

　　　　　　}

⑦CSS3的fit-content配合左右margin为auto实现水平居中方法

.　　content{

　　　　　　width: fit-content;

　　　　　　margin-left: auto;

　　　　　　margin-right: auto;

　　　　　　}

⑧子盒子未设置宽度（常常使用）

contnet{

　　positiion:absolute|relative;

　　left:50%;

　　top:50%;

/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/

　　transform:translate(50%,50%)  注意这里启动了3D硬件加速哦 会增加耗电量的 （至于何是3D加速 请看浏览器进程与线程篇）

}

4.最后介绍一种强大的兼容模式(元素未设置宽度|设置宽度)都可行

html.
<div class="wrap">
    <div class="inside">
        这是一段需要垂直居中的文本
    </div>
</div>


css,
.warp{
   display:table;
   text-align:center;
   width:100px;/*可有可无*/
   height100px; /*可有可无*/      

}
.insid{
   display: table-cell;
   height: 200px;
    background-color: yellow;
    vertical-align: middle;

}

实现原理:通过display将元素变为具有table的块级元素，通过display：table-cell将子元素设置为表格单元格格式，再通过vertical-align实现文本的垂直居中，以及text-align：center实现文本的水平居中 

 

 5.最近发现了一种新的垂直居中的方法【未设置宽高】20190323

①设置的是父元素绝对定位加上下移动，子元素transform左右移动

html.
<div class="demo" >
        <h1 id="demo"></h1>
</div>


css.
.demo{
            position: absolute;
             left:50%;
             top: 50%;
            -o-transform:translateY(-50%);/* opera */
            -ms-transform:translateY(-50%);/* ie */
            -moz-transform:translateY(-50%)/* Firefox */
            -webkit-transform: translateY(-50%);/* google safari */
}
h1{
            -webkit-transform: translateX(-50%);
}

 ②只需要设置子元素移动即可 使用到了绝对定位，旋转等，上代码

html.
<div class="bg">
        <div class="dome">忍一时风平浪静，退一步海阔天空</div>
 </div>


css.
.dome{
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    text-align: center;
    z-index: 22;
}

 

①②③④⑤⑥⑦⑧⑨

 

posted @ 2019-02-28 20:14  请叫我怪兽  阅读(292)  评论(0)  编辑  收藏  举报