CSS实现DIV居中方案

最新推荐文章于 2024-12-03 09:57:35 发布
原创 最新推荐文章于 2024-12-03 09:57:35 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文详细列举了多种使用CSS实现元素垂直居中、水平居中以及水平垂直居中的方法，包括绝对定位、Flex布局、Grid布局、Table-cell布局以及calc()函数动态计算等。这些方案覆盖了不同场景下的布局需求，适用于现代浏览器。

DIV居中方案

如有错误或者更好的方法，欢迎指正或建议。

DIV垂直居中方案

  • 绝对定位+宽高不确定（top、transform）

    /* <div>垂直居中</div> */
div{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
}

  • 绝对定位+宽高确定（top、margin-top）

    /* <div>垂直居中</div> */
div{
	width:100px;
    height: 100px;
    background-color: hsla(10,100%,50%,0.5);
    position: absolute;
    top:50%;
    margin-top: -50px;/* 容器高度的1/2 */
    text-align: center;
    line-height: 100px;
}

  • 绝对定位+宽高确定（top、bottom、margin: auto）

    /* <div>垂直居中</div> */
div{
    width:100px;
    height: 100px;
    background-color: hsla(10,100%,50%,0.5);
    position: absolute;
    top:0;
    bottom: 0;
    margin: auto 0; /*或者margin: auto*/
    /* 
    margin 是复合属性
    margin: auto => margin: auto auto auto auto  
    margin:0 auto => margin: 0 auto 0 auto
    writing-mode: horizontal-tb; 和 direction: ltr; 的情况下
    margin-top: auto; 和 margin-bottom: auto;，计算值为0  => margin: auto; 等同 margin: 0 auto;。
   	*/
	text-align: center;
	line-height: 100px;
}

  • box布局（box-align:center）

    /* 
<div class="fa">
	<div class="son">水平居中</div>
</div>
*/
div.fa {
	height: 500px;
    width: 500px;
    
    /* Internet Explorer 10 */
	display:-ms-flexbox;
	-ms-flex-align:center;

	/* Firefox */
	display:-moz-box;
	-moz-box-align:center;

	/* Safari, Chrome, and Opera */
	display:-webkit-box;
	-webkit-box-align:center;

	/* W3C */
	display:box;
	box-align:center;
    
    background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	width: 100px;
	height: 100px;
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 100px;
}

  • Flex布局 （align-items: center）

    /* 
<div class="fa">
	<div class="son">垂直居中</div>
</div>
*/
div.fa {
	display: flex;
	-webkit-display: flex;
	height: 500px;
    width: 500px;
	align-items: center;
	-webkit-align-items: center;
    background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	width: 100px;
	height: 100px;
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 100px;
}

  • Flex布局+margin（margin: auto 0）

    /* 
<div class="fa">
	<div class="son">垂直居中</div>
</div>
*/
div.fa {
	display: flex;
	-webkit-display: flex;
	height: 500px;
    width: 500px;
    background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	width: 100px;
	height: 100px;
    margin: auto 0;
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 100px;
}

  • Grid布局（align-items: center）

    /* 
<div class="fa">
	<div class="son">垂直居中</div>
</div>
*/
div.fa {
	height: 500px;
    width: 500px;
    display: grid;
	align-items: center;
    background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	width: 100px;
	height: 100px;
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 100px;
}

  • table-cell布局 （vertical-align: middle）参考 display: table-cell知识点总结

    /* 
<div class="fa">
	<div class="son">垂直居中</div>
</div>
*/
div.fa {
	height: 500px;
    width: 500px;
    display: table-cell;
    vertical-align: middle;/*主要作用于内联元素，亦可作用于table-cell*/
    background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	width: 100px;
	height: 100px;
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 100px;
}

  • 绝对定位+calc() （calc() 函数动态计算）

    /* 
<div class="fa">
	<div class="son">垂直居中</div>
</div>
*/
div.fa {
	position: relative;
	height: 70vh;
	width: 70vw;
	background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	position: absolute;
	width: 10vw;
	height: 10vh;
	top: -moz-calc((70vh - 10vh)/2);
	top: -webkit-calc((70vh - 10vh)/2);
	top: calc((70vh - 10vh)/2);
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 10vh;
}

DIV水平居中方案

  • 绝对定位+宽高不确定（top、ltransform）

    /* <div>水平居中</div> */
div{
    position: absolute;
    left:50%;
    transform: translateX(-50%);
}

  • 绝对定位+宽高确定（top、margin-top）

    /* <div>水平居中</div> */
div{
	width:100px;
    height: 100px;
    background-color: hsla(10,100%,50%,0.5);
    position: absolute;
    left:50%;
    margin-left: -50px;/* 容器宽度的1/2 */
    text-align: center;
    line-height: 100px;
}

  • 绝对定位+宽高确定（top、bottom、margin: auto）

    /* <div>水平居中</div> \*/
div{
    width:100px;
    height: 100px;
    background-color: hsla(10,100%,50%,0.5);
    position: absolute;
    left:0;
    right: 0;
    margin: 0 auto; /*或者margin: auto*/
    /* 
    margin 是复合属性
    margin: auto => margin: auto auto auto auto  
    margin:0 auto => margin: 0 auto 0 auto
    writing-mode: horizontal-tb; 和 direction: ltr; 的情况下
    margin-top: auto; 和 margin-bottom: auto;，计算值为0  => margin: auto; 等同 margin: 0 auto;。
   	*/
	text-align: center;
	line-height: 100px;
}

  • box布局（box-pack:center）

    /* 
<div class="fa">
	<div class="son">水平居中</div>
</div>
*/
div.fa {
	height: 500px;
    width: 500px;
    
    /* Internet Explorer 10 */
	display:-ms-flexbox;
	-ms-flex-pack:center;

	/* Firefox */
	display:-moz-box;
	-moz-box-pack:center;

	/* Safari, Chrome, and Opera */
	display:-webkit-box;
	-webkit-box-pack:center;
    
	/* W3C */
	display:box;
	box-pack:center;
    
    background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	width: 100px;
	height: 100px;
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 100px;
}

  • Flex布局 （justify-content: center）

    /* 
<div class="fa">
	<div class="son">水平居中</div>
</div>
*/
div.fa {
	display: flex;
	-webkit-display: flex;
	height: 500px;
    width: 500px;
	justify-content: center;
	-webkit-justify-content: center;
    background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	width: 100px;
	height: 100px;
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 100px;
}

  • Flex布局+margin（margin: 0 auto）

    /* 
<div class="fa">
	<div class="son">水平居中</div>
</div>
*/
div.fa {
	display: flex;
	-webkit-display: flex;
	height: 500px;
    width: 500px;
    background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	width: 100px;
	height: 100px;
    margin: 0 auto;
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 100px;
}

  • Grid布局（justify-items: center）

    /* 
<div class="fa">
	<div class="son">水平居中</div>
</div>
*/
div.fa {
	height: 500px;
    width: 500px;
    display: grid;
	justify-items: center;
    background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	width: 100px;
	height: 100px;
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 100px;
}

  • table-cell布局 （text-align: center）参考 display: table-cell知识点总结

    /* 
<div class="fa">
	<div class="son">水平居中</div>
</div>
*/
div.fa {
	height: 500px;
    width: 500px;
    display: table-cell;
    text-align: center;
    background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	width: 100px;
	height: 100px;
    display: inline-block;/*必须为行内元素*/
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 100px;
}

  • 绝对定位+calc() （calc() 函数动态计算）

    /* 
<div class="fa">
	<div class="son">水平居中</div>
</div>
*/
div.fa {
	position: relative;
	height: 70vh;
	width: 70vw;
	background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	position: absolute;
	width: 10vw;
	height: 10vh;
	left: -moz-calc((70vw - 10vw)/2);
	left: -webkit-calc((70vw - 10vw)/2);
	left: calc((70vw - 10vw)/2);
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 10vh;
}

DIV水平垂直居中方案

  • 绝对定位+宽高不确定（top、ltransform）

    /* <div>水平垂直居中</div> */
div{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}

  • 绝对定位+宽高确定（top、margin-top）

    /* <div>水平垂直居中</div> */
div{
	width:100px;
    height: 100px;
    background-color: hsla(10,100%,50%,0.5);
    position: absolute;
    left:50%;
    top:50%;
    margin-top: -50px;/* 容器高度的1/2 */
    margin-left: -50px;/* 容器宽度的1/2 */
    text-align: center;
    line-height: 100px;
}

  • 绝对定位+宽高确定（top、bottom、margin: auto）

    /* <div>水平垂直居中</div> \*/
div{
    width:100px;
    height: 100px;
    background-color: hsla(10,100%,50%,0.5);
    position: absolute;
    left:0;
    right: 0;
    top:0;
    bottom:0;
    margin: auto; 
    /* 
    margin 是复合属性
    margin: auto => margin: auto auto auto auto  
    margin:0 auto => margin: 0 auto 0 auto
    writing-mode: horizontal-tb; 和 direction: ltr; 的情况下
    margin-top: auto; 和 margin-bottom: auto;，计算值为0  => margin: auto; 等同 margin: 0 auto;。
   	*/
	text-align: center;
	line-height: 100px;
}

  • box布局（box-pack:center;box-align:center）

    /* 
<div class="fa">
	<div class="son">水平垂直居中</div>
</div>
*/
div.fa {
	height: 500px;
    width: 500px;
    
    /* Internet Explorer 10 */
	display:-ms-flexbox;
	-ms-flex-pack:center;
	-ms-flex-align:center;

	/* Firefox */
	display:-moz-box;
	-moz-box-pack:center;
	-moz-box-align:center;

	/* Safari, Chrome, and Opera */
	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;

	/* W3C */
	display:box;
	box-pack:center;
	box-align:center;
    
    background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	width: 100px;
	height: 100px;
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 100px;
}

  • Flex布局 （justify-content: center;align-items: center）

    /* 
<div class="fa">
	<div class="son">水平垂直居中</div>
</div>
*/
div.fa {
	display: flex;
	-webkit-display: flex;
	height: 500px;
    width: 500px;
    align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
    background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	width: 100px;
	height: 100px;
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 100px;
}

  • Flex布局+margin（margin: auto）

    /* 
<div class="fa">
	<div class="son">水平垂直居中</div>
</div>
*/
div.fa {
	display: flex;
	-webkit-display: flex;
	height: 500px;
    width: 500px;
    background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	width: 100px;
	height: 100px;
    margin: auto;
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 100px;
}

  • Grid布局（justify-items: center;align-items: center）

    /* 
<div class="fa">
	<div class="son">水平垂直居中</div>
</div>
*/
div.fa {
	height: 500px;
    width: 500px;
    display: grid;
    align-items: center;
	justify-items: center;
    background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	width: 100px;
	height: 100px;
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 100px;
}

  • table-cell布局 （text-align: center）参考 display: table-cell知识点总结

    /* 
<div class="fa">
	<div class="son">水平垂直居中</div>
</div>
*/
div.fa {
	height: 500px;
    width: 500px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	width: 100px;
	height: 100px;
    display: inline-block;/*必须为行内元素才能水平居中*/
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 100px;
}

  • 绝对定位+calc() （calc() 函数动态计算）

    /* 
<div class="fa">
	<div class="son">水平垂直居中</div>
</div>
*/
div.fa {
	position: relative;
	height: 70vh;
	width: 70vw;
	background-color: hsla(0, 100%, 50%, 0.5);
}
div.son {
	position: absolute;
	width: 10vw;
	height: 10vh;
    top: -moz-calc((70vh - 10vh)/2);
	top: -webkit-calc((70vh - 10vh)/2);
	top: calc((70vh - 10vh)/2);
	left: -moz-calc((70vw - 10vw)/2);
	left: -webkit-calc((70vw - 10vw)/2);
	left: calc((70vw - 10vw)/2);
	background-color: hsla(20, 100%, 50%, 0.5);
	text-align: center;
	line-height: 10vh;
}

参考

https://blog.youkuaiyun.com/qq_31947477/article/details/107053142
https://www.jianshu.com/p/52b0c2a7ea29

CSS如何将div居中
DevWizard的博客
09-28 478
你可以将上述代码保存为一个HTML文件，并在浏览器中打开，以查看不同方法的效果。Flexbox布局是一种强大的CSS布局模型，它提供了一种简便的方式来实现元素的居中对齐。你可以根据项目的要求和浏览器的兼容性来选择最适合的方法。另一个强大的CSS布局模型是Grid布局，它也可以用来实现元素的居中对齐。/* 方法四：使用position属性和transform属性 *//* 方法一：使用margin属性和auto值 *//* 方法二：使用Flexbox布局 */一种简单的方法单的方法是使用CSS的。
CSS如何实现DIV居中
CyberFlare的博客
09-23 1845
然后，我们将DIV元素的定位方式设置为绝对定位（position: absolute），并使用top、left属性将元素的左上角定位到父容器的中心位置。最后，通过使用transform属性并结合translate函数，将元素向左和向上移动自身宽高的一半，从而实现了居中对齐。通过设置容器的display属性为flex，并使用justify-content和align-items属性来控制元素在主轴和交叉轴上的对齐方式，我们可以实现DIV元素的居中显示。根据具体的需求和场景，选择合适的方法来实现居中对齐效果。
div元素的水平垂直居中
最新发布
testleaf.cn
12-03 1554
可以选择以上任意一种方法来实现div元素的水平垂直居中。Flexbox 和 CSS Grid 是现代布局的首选方法，因为它们更简洁和强大。
(转载）关于使用CSS居中(包括水平/垂直)
jackyrongvip的专栏
02-11 1412
关于使用CSS居中(包括水平/垂直)关于使用CSS居中(包括水平/垂直)  用CSS如何使DIV层水平居中这两天开始对网志进行大刀阔斧的页面更改.今天碰到个很棘手的问题,DIV本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.可是事实上这样的方法科学吗?经过网络搜索
CSS——div垂直居中及div内文字垂直居中
aiyizou6070的博客
03-19 972
　　最近做demo时，经常需要div垂直居中或者让div内文字相对div垂直居中。水平居中比较简单，就不多说了，这里主要记录一下垂直居中的一些方法。 一、div垂直居中的一些方法： 1.当height、width固定大小时， <!DOCTYPE html> <html> <head> <meta chars...
使用css实现div垂直居中的示例
09-25
本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，元素的位置可以通过设置`position`属性来控制，其主要值有`static`（默认值）、`relative`、`absolute`和`...
CSS实现DIV居中的三种方法
09-27
本文将详细介绍三种方法来实现`div`的居中对齐，适用于不同场景和需求。 ### 方法一：使用margin自动填充 这种方法适用于当外层`div`（`.div1`）的尺寸已知，并且内层`div`（`.div2`）的尺寸也已知的情况。我们...
css中position:fixed实现div居中上下左右居中
09-25
本篇文章主要探讨了如何利用CSS属性position:fixed来实现DIV的绝对居中。 首先，了解position:fixed属性的作用是关键。position:fixed表示元素相对于浏览器窗口进行定位，这意味着无论页面如何滚动，元素都将保持在...
DIV+CSS DIV居中布局
03-19
本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先，我们要理解`<div>`元素。`<div>`是“division”的缩写，代表一个区域或区块，在HTML中用于组合其他元素，是构建网页布局的基础。通过设置`<div>`...
css之div中元素居中
weixin_33807284的博客
04-04 280
为什么80%的码农都做不了架构师？>>> ...
css div居中
xuyuwas的博客
04-29 446
在进行css布局的时候，如果需要div居中的话，可以利用一下margin的负值的小技巧 Document div{ height: 600px; width: 400px; margin-left: -200px; margin-top: -300px; left: 50%; top:50%; background-color: red; }
CSS：使用CSS3将一个div水平和垂直居中显示
weixin_34218890的博客
04-13 650
使用css3将一个div水平和垂直居中显示 方案一： div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】， 代码两个关键点：1.上下左右均0位置定位； 　　　　　　　　2.margin: auto; 其width、height如何更改都是居中显示的，兼容性可以,IE7及之前版本不支持 1 .div1{ 2 3 width: 100px; ...
CSS设置div水平垂直居中
qq_36507046的博客
08-31 1640
本节主要介绍了几种常见的CSS设置div水平垂直居中的方法
css: div中所有的元素居中
wcdunf的博客
04-28 8415
/*居中*/ display: flex; justify-content: center;/*垂直居中*/ align-items: center;/*水平居中*/
css之div盒子居中常用方法大全
高电平的博客
09-20 5388
只需要保证left和right的百分数一样就可以实现水平居中，保证top和bottom的百分数一样就可以实现垂直居中。这个方法就是利用绝对定位，使它的top、left、right、bottom都为0就可以实现居中。这个方法用在垂直居中都可以，就使它的上下为 0 就可以实现垂直居中。利用负的margin来进行居中，需要知道固定宽高，限制比较大。这种的话就是将父元素转换成表格单元格显示，然后使用垂直居中实现。这种定位方法，得需要知道宽高，不灵活。这种唯一的缺点就是 IE9 以下不支持。
div居中
全栈菜鸟的博客
11-13 3736
div绝对定位水平垂直居中（margin:auto实现绝对定位元素的居中） div{ width: 500px; height: 500px; background: red; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } div绝对定位水平垂直居中（margin 负间距） div{ width:200px; h
CSS教程：div垂直居中的N种方法
weixin_30882895的博客
08-23 957
在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生 效，例如表格元素中的<td>、<th>、<capt...
用css实现Div的垂直居中
chaopingyao的博客
03-21 670
最近面试的时候，经常被问到css中div垂直居中的问题，趁现在整理的方法比较全面，记录下来！ 外层div大小不定，内层div宽高确定 代码如下： <html> <head> <style> #content { width: 600px; height: 400px; ...
css样式-div居中
7c
08-11 4867
三种方式设置div居中、垂直对齐、变形
CSS实现DIV垂直居中技巧解析
“CSS网页布局中实现DIV垂直居中的多种方法，包括单行文本垂直居中以及适用于不同场景的解决方案。” 在CSS布局中，垂直居中是一个常见的需求，但实现起来并不总是那么简单，尤其是在不同的浏览器间可能存在兼容性...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值