关于CSS布局技巧的总结分享

来源：懂视网责编：小采时间：2020-11-27 18:50:15

关于CSS布局技巧的总结分享

关于CSS布局技巧的总结分享:单列布局水平居中父元素text-align:center;子元素：inline-block;优点：兼容性好；不足：需要同时设置子元素和父元素<!DOCTYPE html> <html lang="en"> <head> <meta charset="

推荐度：

点击下载本文 文档为doc格式

导读关于CSS布局技巧的总结分享:单列布局水平居中父元素text-align:center;子元素：inline-block;优点：兼容性好；不足：需要同时设置子元素和父元素<!DOCTYPE html> <html lang="en"> <head> <meta charset="

单列布局

水平居中

父元素text-align:center;子元素：inline-block;

优点：兼容性好；

不足：需要同时设置子元素和父元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中1</title>
<style>
 .parent {
 width: 500px;
 height: 400px;
 background: red;
 text-align: center;
 }
 .child {
 display: inline-block;
 width: 300px;
 height: 100px;
 background: blue;
 }
</style>
</head>
<body>
<p class="parent">
 <p class="child"></p>
</p>
</body>
</html>

子元素margin:0 auto;

优点：兼容性好

缺点：需要指定宽度

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>水平居中1</title>
 <style>
 .parent {
 width: 500px;
 height: 400px;
 background: red;
 }
 .child {
 width: 300px;
 height: 100px;
 background: blue;
 margin:0 auto;
 }
 </style>
</head>
<body>
 <p class="parent">
 <p class="child"></p>
 </p>
</body>
</html>

子元素{display:table;margin:0 auto;}

优点:只需要对自身进行设置

不足:IE6,7需要调整结构

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>水平居中1</title>
 <style>
 .parent {
 width: 500px;
 height: 400px;
 background: red;
 }
 .child {
 width: 300px;
 height: 100px;
 background: blue;
 margin:0 auto;
 display:table;margin:0 auto;s
 }
 </style>
</head>
<body>
 <p class="parent">
 <p class="child"></p>
 </p>
</body>
</html>

父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半

优点：兼容性好

缺点：需要知道子元素的宽度

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>水平居中1</title>
 <style>
 .parent {
 width: 500px;
 height: 400px;
 background: red;
 position: relative;
 top: 0;
 left: 0;
 }
 .child {
 width: 300px;
 height: 100px;
 background: blue;
 position: absolute;
 top: 0;
 left: 50%;
 margin-left: -150px;
 }
 </style>
</head>
<body>
 <p class="parent">
 <p class="child"></p>
 </p>
</body>
</html>

父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);

优点：兼容性差

缺点：不需要知道子元素的宽度

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>水平居中1</title>
 <style>
 .parent {
 width: 500px;
 height: 400px;
 background: red;
 position: relative;
 top: 0;
 left: 0;
 }
 .child {
 width: 300px;
 height: 100px;
 background: blue;
 position: absolute;
 top: 0;
 left: 50%;
 transform: translate(-50%,0);
 }
 </style>
</head>
<body>
 <p class="parent">
 <p class="child"></p>
 </p>
</body>
</html>

弹性盒子：父元素：display:flex;justify-content:center;

优点：简单

缺点：兼容性差

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中1</title>
<style>
 .parent {
 width: 500px;
 height: 400px;
 background: red;
 display: flex;
 justify-content: center;
 }
 .child {
 width: 300px;
 height: 100px;
 background: blue;
 }
</style>
</head>
<body>
<p class="parent">
 <p class="child"></p>
</p>
</body>
</html>

垂直居中

vertical-align:center;

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>水平居中1</title>
 <style>
 .parent {
 width: 500px;
 height: 400px;
 background: red;
 display:table-cell;
 vertical-align:middle;
 }
 .child {
 width: 300px;
 height: 100px;
 background: blue;
 }
 </style>
</head>
<body>
 <p class="parent">
 <p class="child"></p>
 </p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>垂直居中1</title>
 <style>
 .parent {
 width: 500px;
 height: 400px;
 background: red;
 vertical-align:middle;
 line-height:450px; 
 }
 .child {
 width: 300px;
 height: 100px;
 background: blue;
 display:inline-block;
 }
 </style>
</head>
<body>
 <p class="parent">
 <p class="child"></p>
 </p>
</body>
</html>
<!-- 这种方法需要知道父元素和子元素的高度，父元素的line-height的值为父元素高度减去子元素高度的一半。-->

父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>垂直居中1</title>
 <style>
 .parent {
 width: 500px;
 height: 400px;
 background: red;
 position: relative;
 top: 0;
 left: 0; 
 }
 .child {
 width: 300px;
 height: 100px;
 background: blue;
 position: absolute;
 top: 50%;
 left:0;
 transform: translate(0,-50%);
 }
 </style>
</head>
<body>
 <p class="parent">
 <p class="child"></p>
 </p>
</body>
</html>

父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;
父元素：display:flex;align-items:center;

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>垂直居中1</title>
 <style>
 .parent {
 width: 500px;
 height: 400px;
 background: red;
 display: flex;
 align-items: center; 
 }
 .child {
 width: 300px;
 height: 100px;
 background: blue;
 }
 </style>
</head>
<body>
 <p class="parent">
 <p class="child"></p>
 </p>
</body>
</html>

水平垂直居中

父元素：display:table-cell;vertical-align:middle;text-align:center;
子元素；display:inline-block;

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>垂直居中1</title>
 <style>
 .parent {
 width: 500px;
 height: 400px;
 background: red;
 display:table-cell;
 vertical-align:middle;
 text-align:center; 
 }
 .child {
 width: 300px;
 height: 100px;
 background: blue;
 display: inline-block;
 }
 </style>
</head>
<body>
 <p class="parent">
 <p class="child"></p>
 </p>
</body>
</html>