1. IT分享知识网首页
  2. 开发框架
  3. CSS

16种CSS水平垂直居中方法[通俗易懂]

老牧童 • • CSS • 阅读 275

16种CSS水平垂直居中方法[通俗易懂]16种css水平垂直居中方法以及应用（文字、图片）一、垂直居中1、行内元素基本思想：单行文本子元素line-height值为父元素height值.parent{height:200px;}.son{line-height:200px;}2、块级元素2.1行内块级元素基本思想：元素是行内块级，使用display:inline-block,vertical-align:middle+伪元素处于容器中央兼容性：支持IE7.parent::afte

大家好，欢迎来到IT知识分享网。

16种css水平垂直居中方法以及应用（文字、图片）

一、垂直居中
1、行内元素

基本思想：单行文本子元素line-height 值为父元素 height 值

.parent { 
   
    height: 200px;
}

.son { 
   
    line-height: 200px;
}
2、块级元素
2.1行内块级元素

基本思想：元素是行内块级，使用display: inline-block, vertical-align: middle+伪元素处于容器中央

兼容性：支持IE7

.parent::after, .son{ 
   
    display:inline-block;
    vertical-align:middle;
}
.parent::after{ 
   
    content:'';
    height:100%;
}
2.2table布局

兼容性：支持IE6/IE7，IE8无效

.parent { 
   
  display: table;
}
.son { 
   
  display: table-cell;
  vertical-align: middle;
}
2.3flex弹性布局

2009版写法

兼容性：不支持IE

.parent {
    display: box;
    box-orien: vertical;
    box-pack: center;
}

2012版写法

兼容性：IE8/IE9不支持

.parent{ 
   
  display:flex;
  justify-content:center;
}
.son{ 
   
  align-self:center;
}
2.4绝对定位+transform:translate(-50%,-50%)
.parent{ 
   
  position:relative;
}
.son{ 
   
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
二、水平居中
1、行内元素

基本思想：父元素设置text-align: center即可实现行内元素水平居中

.parent { 
   
    text-align: center;
}
2、块级元素
2.1一般居中

基本思想：该元素设置margin:0 auto

.son { 
   
    margin: 0 auto;
}
2.2子元素含float

基本思想：子元素包含 float:left 属性, 让父元素宽度设置为fit-content,并且配合margin，fit-content是css3的新属性值

.parent{ 
   
    width:fit-content;
    margin:0 auto;
}

.son { 
   
    float: left;
}
2.3 flex弹性布局

2009版本写法

.parent{ 
   
    display:box;
    box-orient:horiaontal;
    box-pack:center;
}

2012版写法

.parent{ 
   
    display:flex;
    justify-content:center;
}
2.4绝对定位
  • transform
.son{ 
   
    position:absolute;
    left:50%;
    transform:translate(-50%,0);
}
  • 负值margin-left
.son{ 
   
    position:absolute;
    with:固定宽度
    left:50%;
    margin-left:-0.5*固定宽度;
}
  • left:0;right:0;margin:0 auto
.son{ 
   
    position:absolute;
    width:固定宽度;
    left:0;
    right:0;
    margin:0 auto;
}
三、具体应用–文字居中
3.1css如何设置文字水平居中

基本思想：css使用text-align规定水平对齐方式，影响一个元素的文本行相互的对齐方式。center值设置文本居中

注意：text-align应用与容器，针对容器里面的文字以及容器里面的display:inline/inline-block，若是display:block无影响

text-align具备向下传递的特点，设置一个div，div里面的也会居中

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style> .box { 
     width: 500px; height: 80px; background: rgb(228, 178, 187); text-align: center; } </style>
</head>

<body>
    <div class="box">css 水平居中了--文本文字</div>
</body>

</html>

在这里插入图片描述

3.2css如何设置文字垂直居中
  • 单行文本：基本思想是行高（line-height）和所在区域高度（height）设置一致
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style> .box { 
     width: 500px; height: 80px; background: rgb(228, 178, 187); line-height: 80px; } </style>
</head>

<body>
    <div class="box">css 垂直居中--单行文本</div>
</body>

</html>

在这里插入图片描述

  • 多行文本

（1）当父级元素高度不固定

当父级元素不固定，会随着内容变化，高度只能通过文本的高度来撑开，所以需要使用内填充padding来使多行文本居中。只需要设置padding-top的值与padding-bottom的值相等

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style> .box { 
     width: 500px; margin: 50px auto; background: rgb(228, 178, 187); padding-top: 50px; padding-bottom: 50px; padding-right: 20px; padding-left: 20px; } </style>
</head>

<body>
    <div class="box">css 垂直居中--多行文本--父级高度不固定</div>
</body>

</html>

在这里插入图片描述

（2）当父级元素高度固定

vertical-align:middle +display:table-cell

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style> .box { 
     width: 500px; height: 100px; background: rgb(228, 178, 187); vertical-align: middle; display: table-cell; } </style>
</head>

<body>
    <div class="box">css 垂直居中--多行文本--父级高度固定</div>
</body>

</html>

在这里插入图片描述

四、具体引用–图片居中
4.1display：table

基本思想：最外层div display: table+img父元素display: table-cell、vertical-align: middle

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style> .box { 
     width: 300px; height: 200px; background: rgb(228, 178, 187); display: table; } #imgbox { 
     display: table-cell; vertical-align: middle; } #imgbox img { 
     width: 200px; } </style>
</head>

<body>
    <div class="box">
        <div id="imgbox">
            <img src="1.jpg" alt="图片1">
        </div>
    </div>
</body>

</html>

在这里插入图片描述

思考：如何在图片垂直居中基础上+水平居中

基本思想：最外层div text-align: center（具有向下传递的特点）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style> .box { 
     width: 300px; height: 200px; background: rgb(228, 178, 187); display: table; text-align: center;/*增加的一行代码*/ } #imgbox { 
     display: table-cell; vertical-align: middle; } #imgbox img { 
     width: 200px; } </style>
</head>

<body>
    <div class="box">
        <div id="imgbox">
            <img src="1.jpg" alt="图片1">
        </div>
    </div>
</body>

</html>

在这里插入图片描述

4.2flex实现

基本思想：display: flex;align-items: center

兼容性：不是最好的选择，IE8/IE9不支持

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style> .imgbox { 
     width: 300px; height: 200px; background: rgb(228, 178, 187); display: flex; align-items: center; } .imgbox img { 
     width: 150px; height: 100px; align-items: center; } </style>
</head>

<body>
    <div class="imgbox">
        <img src="1.jpg" alt="图片1">
    </div>
</body>

</html>

在这里插入图片描述

4.3绝对定位

基本思想：img父元素相对定位position: relative+子元素绝对定位position: absolute，img的top设置为50%，负值margin-top（这个是想实现垂直居中元素高度的一半），不确定高度用transform:translateY(-50%)

兼容性：推荐写法，兼容性好

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style> .imgbox { 
     width: 300px; height: 200px; background: rgb(228, 178, 187); position: relative; margin: 0 auto; } .imgbox img { 
     width: 150px; position: absolute; top: 50%; transform: translateY(-50%); } </style>
</head>

<body>
    <div class="imgbox">
        <img src="1.jpg" alt="图片1">
    </div>
</body>

</html>

在这里插入图片描述

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/24856.html

赞 (0)
老牧童老牧童
0
上一篇 2023-08-03 18:33
下一篇 2023-08-10 17:00

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信