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

最新推荐文章于 2023-02-22 15:30:52 发布
最新推荐文章于 2023-02-22 15:30:52 发布
阅读量428 收藏
点赞数 1
分类专栏： css3 文章标签： 垂直居中 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangweiscsdn/article/details/52592534
版权 
<!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

 

 

 

 

 

Eveweiscsdn
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 垂直居中的几种实现方法
12-13
今天重新整理一下思路，说说前端在实现页面元素垂直居中的几种思路： 一、利用 position 和负边距 利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个...
CSS 垂直居中的七种方法——史上最详细总结
qq_37384271的博客
10-10 2万+
我们在写页面时，通常会用到水平居中或垂直居中，而水平居中很好处理，不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦，下面介绍七种纯 CSS 实现垂直居中的方式。 一、设定行高（line-height） 设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），例如单行的标题，或是已经设为 inline-block 属性的 div，若将 line-height 设成和高度一样的数值，则内容的行内元
css垂直水平居中的详细实现方式（6种）
weixin_46591819的博客
02-22 8618
css垂直水平居中方式
CSS实现垂直居中的6种办法
weixin_68258851的博客
07-18 8734
父子元素都不确定宽高的情况也适用。如果子元素的宽高确定的话，translate中的值也可以设置为子元素宽高的一半，即transformtranslate(-100px,-100px);这种方式适合子元素宽高确定的情况，给margin-top设置百分比的大小将不生效，即margin-top-50%;这种方式需要父元素的宽高都是确定的，才能保证子元素在父元素中垂直水平都居中。这种方式要求父元素的高度是确定的，百分比形式的高度将不能生效。这种方式适用于父元素高度确定的情况。父子元素宽高都未知时也适用。...
css垂直居中的6种方式
weixin_42974827的博客
09-08 1万+
这里实现了比较常用的垂直水平居中的方案，十分有用，希望对于面试必考题来说，只要熟练掌握前面三种，基本上是没有问题了，源码我会放在本人主页的资源里面，供大家免费下载，创作不易，关注一下，后续将带来vue版本大屏可视化解决方案。敬请期待吧~~~❤️。
CSS实现垂直居中的5种方法
m0_56649557的博客
08-20 1万+
第一种 position定位+margin负距离 前提是知道居中元素的宽高，首先给居中元素定位，之后设置margin的负距离为具体宽高的一半便可达到垂直居中效果 <style> .box1 { height: 300px; width: 300px; border: 10px solid pink; position: relative; } .
CSS 实现垂直居中的几种方法(必看)
12-13
最近在学关系型数据库相关，MySQL 和 Postgre,捎带着学了 PHP，为了练手这几天就忙着自己搭博客，项目...但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？ •方式一 ：table 布局方法
纯CSS实现垂直居中的9种方法
01-19
为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。 方法1：table-cell html结构： XML/HTML Code复制内容到剪贴板  box1>...
CSS 垂直居中的5种实现方法
12-12
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。   使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效...
常用的css将元素垂直居中的6种方法
01-08
常用的css将元素垂直居中的方法 1. 使用line-height将单行文本垂直居中 设置line-height等于height，可使单行文本垂直居中 例： div { height: 50px; width: 200px; border: 1px solid #ccc; } 效果如下： ...
css 居中问题的总结
qq_43889848的博客
05-15 2228
1.css让浮动的盒子水平居中 解决方法： 给浮动的盒子加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子为margin: 0 auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin:
CSS实现垂直居中的7种方法
c_x_m的博客
03-04 1万+
CSS实现垂直居中的7种方法1、设定行高(line-height)2、设置伪元素::before3、absolute + transform4. 设置绝对定位5、设置display:flex6、absolute + calc7. display:table-cell实现CSS垂直居中。 1、设定行高(line-height) HTML： <div class="parent"> <span class="child">你好</span> </div>
css表格怎么垂直居中对齐,css表格垂直居中怎么设置？
weixin_33552230的博客
08-04 4225
css设置表格垂直居中的方法：1、在表格外面嵌套一层table，用table中的td来控制居中。2、将表格放在div标签中，通过为div设置css样式display:table-cell实现垂直居中。css设置表格垂直居中的方法：1、在表格外面嵌套一层table，用table中的td来控制居中。2、将表格放在div标签中，通过为div设置css样式display:table-cell实现垂直居中。...
CSS垂直居中的6种方法
Harley567
02-13 4152
CSS垂直居中的6种方法
经典：CSS垂直居中的七种方法
weixin_46837985的博客
10-09 1601
点击上方“程序员黑叔”，选择“置顶或者星标”你的关注意义重大！作者：来自互联网我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好处理，不外乎就是设定margin:...
css实现table中的文字垂直水平居中
weixin_42780601的博客
03-13 2419
属性text-align:center:实现水平居中 属性display:table-cell;vertical-align:center:实现垂直居中 测试1 测试2 测试3 测试4
html中表格table的内容水平和垂直居中显示
热门推荐
xujing19920814的博客
03-27 13万+
html中表格table的内容居中显示 在CSS样式文件中指定#class td /*设置表格文字左右和上下居中对齐*/ { vertical-align: middle; text-align: center; } /*class 是所属的类*/ <div id="class" align="center" style= "margin: 0cm 0cm 0pt; te
CSS - 使表格td中的文字垂直居中
william_n的博客
04-21 3万+
文字垂直居中的有如下的方法 方法一：valign:middle //不推荐使用 代码如下： <table> <tbody> <tr> <tdvalign="middle">垂直居中</td> </tr> </tbody> </table> ...
css实现垂直居中的方法总结（很详细滴）
冰雪为融的博客
03-30 1万+
未知宽高元素的垂直水平居中 第一种方法：组合使用display：table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（内部div设置display：inline-block即可）这在子元素不确定宽度和高度时，特别适用哦 咳咳，敲黑板划重点啦： 与其他一些display属性类似，table-cell同样会被其他一些css属性破坏，例如f...
css垂直居中的几种方法
最新发布
06-28
下面介绍几种常用的CSS垂直居中的方法。 一、利用flex布局实现垂直居中 父元素设置display:flex; align-items:center; justify-content:center; 实现子元素的垂直居中。 二、利用绝对定位实现垂直居中 将子元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值