用css的垂直居中二十七种方法

最新推荐文章于 2024-05-09 17:25:29 发布

墨墨博客

最新推荐文章于 2024-05-09 17:25:29 发布

阅读量466

点赞数 1

分类专栏： css3 文章标签：垂直居中 css

本文链接：https://blog.csdn.net/wangweiscsdn/article/details/52592534

版权

css3 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h1>第一种</h1>
	<div style="width:600px;
			height:600px;
			background-color: #d75efa;
			text-align:center;
			vertical-align: middle;">
		<div style="line-height:600px;"><!--用行高控制--!>
			shuahcudh
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h2>第二种</h2><!--把div看成表格，让表格元素垂直居中--!>
<div style="display:table;width:500px;height:500px;">
<div style="display:table-cell;vertical-align:middle;text-align;center">
bhcdbhc
</div>
</div>
</body>
</html>

<html>
<head>
	<title>第三种</title>
</head>
<body>
	<div style="width:800px;height:800px;background-color:green;">
	<div style="height:200px;width:500px;margin:-150px 0 0 -250px;position:relative;left:50%;top:50%;background-color:yellow;">
		
	</div>
	</div>
</body>
</html>

第3种效果图：

第四种：

<html>
<head>
  <title>垂直居中第四种</title>
  <style>
    .d1{
      width:200px;
      height:200px;
      border:1px solid red;
      position:relative;
      left:0;
      right:0;
    }
    .d2{
      width:100px;
      height:100px;
      border:1px solid blue;
      position:absolute;
      top:0;
      left:0;
      right:0; 
      bottom:0;
      margin:auto;
    }
  </style>
  <link rel="stylesheet" href="css.css" />
  </head>
  <body>
    <div class="d1">
      <div class="d2">
      </div>
    </div>
  </body>
</html>

第四种效果图：

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>第五种垂直居中</title>
  <style>
  html,body{
  	height: 100%;
  	margin: 0;
  }
	body{
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-ms-flex-align: center;
		-weblit-align-items: center;
	}
	div{
		width: 200px;
		height: 300px;
		border: 1px solid red;
	}
  </style>
</head>
<body>
  <div></div>
</body>

第五种的效果图：

<html>
<head>
  <title>第6种</title>
  <style>
  .cz{
  width:200px;
  height:200px;
  border:1px solid red;
}

.inner{
  position: relative;
 top: 50%;
 transform: translateY(-50%);
}
  </style>
  </head>
  <body>
    <div class="cz">
      <div class="inner">垂直居中</div>
    </div>
  </body>
</html>

第六种的效果图：

第七种效果图：

代码如下：

<html>
  <head>
    <title>第七种</title>
    <style>
        .content{
          width:200px;
          line-height:100px;
          margin:auto;
          background-color:#ccc;
          text-align:center;
        }
    </style>
  </head>
  <body>
    <div class='content'>line-hight</div>
  </body>
</html>

第八种效果图如下：

代码如下：

<html>
  <head>
    <title>第八种</title>
  </head>
  <body>
    <div class="box box2">
  <div class="content">
    第八种  </div>
</div>
  </body>
</html>

.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  line-height: 200px;
  text-align: center;
}
.box2 .content{
  display: inline-block;
  height: auto;
  line-height:1;
  width: 400px;
  background: #ccc;
}

第九种效果提如下：

第九种代码如下：

<html>
  <head>
    <title>第九种</title>
  </head>
  <body>
    <div class="box box3">
  <div class="content">
      第九种:before+inline-block</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #bdd;
  margin: auto;
  text-align: center;
}
.box::before{
  content:'';
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
.box .content{
  width: 400px;
  background: #abf;
  display: inline-block;
  vertical-align: middle;
}

第十种效果图如下：

第十种代码如下：

<html>
  <head>
    <title>第十种</title>
  </head>
  <body>
    <div class="box box4">
  <div class="content">
    第十种absolute + 负margin  </div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #aee;
  margin: auto;
  position: relative;
}
.box4 .content{
  width: 400px;
  background: #dbe;
  height: 70px;
  line-height:70px;
  text-align:center;
  position: absolute;
  top:50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -35px;
}

第十一种效果图如下：

第十一点代码如下：

<html>
  <head>
    <title>第十一种</title>
  </head>
  <body>
   <div class="box box6">
  <div class="content">
    第十一种absolute + translate</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #8ac;
  margin: auto;
  position: relative;
}
.box6 .content{
  width: 400px;
  background: #de3;
  position: absolute;
  top:50%;
  left: 50%;
  text-align:center;
  transform: translate(-50%, -50%);
}

第十二种效果图如下：

第十二种代码如下：

<html>
  <head>
    <title>第十二种</title>
  </head>
  <body>
   <div class="box">
  <div class="content">
    第十二种Flex + :before + flex-grow</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #7eb;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box:before{
  content: '';
  flex-grow: .5;
}
.content{
  width: 400px;
  background: #ebb;
}

第十三种效果图：

第十三种代码如下：

<html>
  <head>
    <title>第十三种</title>
  </head>
  <body>
   <div class="box">
  <div class="content">
    第十三种Flex + margin</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #ead;
  margin: auto;
  display: flex;
}
.content{
  width: 400px;
  background: #bcf;
  margin: auto;
}

第十四种效果图如下：

第十四种代码如下：

<html>
  <head>
    <title>第十四种</title>
  </head>
  <body>
   <div class="box">
  <div class="content">
    第十四种Flex + align-self</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #ade;
  margin: auto;
  display: flex;
  justify-content: center;
}
.content{
  width: 400px;
  background: #cdf;
  align-self: center
}

第十五种效果图如下：

第十五种代码如下：

<html>
  <head>
    <title>第十五种</title>
  </head>
  <body>
   <div class="box box15">
  <div class="content">
    第十五种Flex + align-content</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}
.content{
  width: 400px;
  background: #ccc;
}
.box15:before,
.box15:after{
  content: '';
  display: block;
  width:100%;
}

第十六种效果图如下：

第十六种代码如下：

<html>
  <head>
    <title>第十六种</title>
  </head>
  <body>
   <div class="box">
  <div class="content">
    第十六种Grid + template</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 
    '. . .'
    '. wei .'
    '. . .';
}
.content{
  width: 400px;
  background: #ccc;
  grid-area: wei;
}

第十七种效果图如下：

第十七种代码如下：

<html>
  <head>
    <title>第十七种</title>
  </head>
  <body>
   <div class="box">
  <div class="content">
    第十七种Grid + align-items</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #adb;
  margin: auto;
  display: grid;
  justify-content: center;
  align-items: center; 
}
.content{
  width: 400px;
  background: #adb;
}

第十八种效果图如下：

第十八种代码如下：

<html>
  <head>
    <title>第十八种</title>
  </head>
  <body>
   <div class="box">
  <div class="content">
    第十八种Grid + align-content</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #adb;
   margin: auto;
  display: grid;
  justify-content: center;
  align-content: center;  
}
.content{
  width: 400px;
  background: #adb;
}

第十九种效果图如下：

第十九种代码如下：

<html>
  <head>
    <title>第十九种</title>
  </head>
  <body>
   <div class="box">
  <div class="content">
    第十九种Grid + align-self</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #adb;
  margin: auto;
  display: grid;
  justify-content: center;
}
.content{
  width: 400px;
  background: #adb;
  align-self: center;
}

第二十种效果图如下：

第二十种代码如下：

<html>
  <head>
    <title>第二十种</title>
  </head>
  <body>
   <div class="box">
  <div class="content">
    第二十种Grid + place-items，此属性是align-items与justify-items的缩写，简单的说就是水平与垂直的对齐方式</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #adb;
  margin: auto;
  display: grid;
  height: 150px;
  margin: 0 auto;
  place-items: center;
}
.content{
  width: 400px;
  background: #adb;
  align-self: center;
}

第二十一种效果图：

第二十一种代码如下：

<html>
  <head>
    <title>第二十一种</title>
  </head>
  <body>
   <div class="box">
  <div class="content">
    第二十一种Grid + place-content，此属性是align-content与justify-content的缩写，简单的说就是水平与垂直的对齐方式</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #adb;
  margin: auto;
  display: grid;
  height: 150px;
  margin: 0 auto;
  place-content: center;
}
.content{
  width: 400px;
  background: #adb;
  align-self: center;
}

第二十二种效果图如下：

第二十二种代码如下：

<html>
  <head>
    <title>第二十二种</title>
  </head>
  <body>
   <div class="box">
  <div class="content">
    第二十二种Grid + margin</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #adb;
  margin: auto;
  display: grid;
}
.content{
  width: 400px;
  background: #adb;
  margin:auto;
}

第二十三种效果图如下：

第二十三种代码如下：

<html>
  <head>
    <title>第二十三种</title>
  </head>
  <body>
   <div class="box">
  <div class="content">
    第二十三种Display：table-cell</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #adb;
 margin: auto;
    text-align: center;
    display: table-cell;
  vertical-align: middle;
}
.content{
  width: 400px;
  background: #adb;
  margin:auto;
}

第二十四种效果图如下：

第二十四种代码如下：

<html>
  <head>
    <title>第二十四种</title>
  </head>
  <body>
   <div class="box">
  <div class="content">
    第二十四种calc</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #da0;
  margin: auto;
}
.content{
  width: 400px;
  background: #bcd;
  position: relative;
  top:calc((100% - 70px) / 2);
  margin:auto;
  height: 70px;
}

第二十五种效果图如下：

第二十五种代码如下：

<html>
  <head>
    <title>第二十五种</title>
  </head>
  <body>
   <div class="box">
  <div class="content">
    第二十五种Relative + translateY</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #da0;
  margin: auto;
}
.content{
  width: 400px;
  background: #bcd;
   position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
}

第二十六种效果图如下：

第二十六种代码如下：

<html>
  <head>
    <title>第二十六种</title>
  </head>
  <body>
   <div class="box">
  <div class="content">
    第二十六种Relative + translateY</div>
</div>
  </body>
</html>

.box{
  width: 500px;
  border: 1px solid #da0;
  margin: auto;
  height: auto;
  padding: 50px 0;
}
.content{
  width: 400px;
  background: #bcd;
  margin: auto;
}

第二十七种效果图如下：

第二十七代码如下：

<html>
  <head>
    <title>第二十七种</title>
  </head>
  <body>
   <div class="box">
  <div class="content">
    <div class='txt'></div>
    第二十七种Write-mode
     </div>
</div>
  </body>
</html>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #5d0;
  margin: auto;
  writing-mode: tb-lr; /* for ie11 */
  writing-mode: vertical-lr;
  text-align: center;
  margin:0 auto;
}
.content{
  width: 400px;
  background: #5d0;
  display: inline-block; /* for ie & edge */
  width: 100%;
  writing-mode: lr-tb;
  margin: auto; 
  text-align: left;
}
.box .txt{
  width: 80%;
  margin: auto;
}

参考链接：https://mp.weixin.qq.com/s/CvLXXDV_0J-rF-85AWjgsw