css实现水平垂直居中的七种方式
Posted 勉灬之
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css实现水平垂直居中的七种方式相关的知识，希望对你有一定的参考价值。
css实现水平垂直居中的七种方式
一、使用grid布局
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<style>
#outside
width: 200px;
height: 200px;
background: #000;
display: grid;
place-items: center;
/* place-items等于justify-items:center; + align-items:center;*/
#inside
width: 50px;
height: 50px;
background: #96f2d7;
</style>
</head>
<body>
<div id="outside">
<div id="inside"></div>
</div>
</body>
</html>
二、使用flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<style>
#outside
width: 400px;
height: 400px;
background: #000;
display: flex;
justify-content: center;
align-items: center;
#inside
width: 100px;
height: 100px;
background: #ffc9c9;
</style>
</head>
<body>
<div id="outside">
<div id="inside"></div>
</div>
</body>
</html>
三、使用定位+外边距
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<style>
#outside
width: 300px;
height: 300px;
background: #000;
position: relative;
#inside
width: 100px;
height: 100px;
background: #eebefa;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;
</style>
</head>
<body>
<div id="outside">
<div id="inside"></div>
</div>
</body>
</html>
四、使用定位+平移
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<style>
#outside
width: 200px;
height: 200px;
background: #000;
position: relative;
#inside
width: 50px;
height: 50px;
background: #a5d8ff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
</style>
</head>
<body>
<div id="outside">
<div id="inside"></div>
</div>
</body>
</html>
五、使用外边距 + 平移
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<style>
#outside
width: 200px;
height: 200px;
background: #000;
overflow: hidden;
/* overflow: hidden;是为了防止父子元素的margin-top重合 */
#inside
width: 50px;
height: 50px;
background: #ffffb8;
margin: 50% auto;
transform: translateY(-50%);
</style>
</head>
<body>
<div id="outside">
<div id="inside"></div>
</div>
</body>
</html>
六、使用文本对齐 + 行高
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<style>
#outside
width: 200px;
height: 200px;
background: #000;
text-align: center;
line-height: 200px;
vertical-align: middle;
#inside
color: #e9ecef;
display: inline;
</style>
</head>
<body>
<div id="outside">
<div id="inside">只适用于行内元素</div>
</div>
</body>
</html>
七、使用表格单元
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<style>
#outside
width: 200px;
height: 200px;
background: #000;
display: table-cell;
text-align: center;
vertical-align: middle;
#inside
color: #ffdeeb;
</style>
</head>
<body>
<div id="outside">
<div id="inside">只适用于行内元素</div>
</div>
</body>
</html>
以上是关于css实现水平垂直居中的七种方式的主要内容，如果未能解决你的问题，请参考以下文章