CSS页面布局是web前端开发的最基本的技能，本文将介绍一些常见的布局方法，涉及到盒子布局，column布局，flex布局等内容。本文中，你可以看到一些水平垂直居中的方法，左侧固定宽度，右侧自适应的一些方法。如果你有更多关于布局方面的技巧，欢迎留言交流。一、神奇的居中 经常看到有一些面试题问如何实现水平垂直居中，还要求用多种方法。唉唉唉！下面介绍一下我所知道的实现居中的方法。（1）父元素relative;子元素absolute，top:50%;left:50%;margin-left:-自己宽度的一半;margin-right:-自己高度的一半。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平垂直居中2</title>
<style type="text/css">
.container{
width: 100%;
height: 500px;
background: red;
position: relative;
}
.child{
width: 300px;
height: 300px;
background: blue;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -150px;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>这种方法需要知道子元素的宽高。
（2）父元素：relative;子元素：absolute;top：50%;left:50%;transform:translate(-50%,-50%);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平垂直居中3</title>
<style type="text/css">
.container{
background: red;
width: 100%;
height: 500px;
position: relative;
}
.child{
background: blue;
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html><span style="font-size: 14px; font-family: Microsoft YaHei">此法跟上面的相似，但是用到了transform，好处是不需要知道子元素的宽高,兼容性方面我查了一下，看着办吧。<br><img src="https://img.php.cn/upload/article/000/000/013/e6f851faee59ab9abba51c883c21e708-0.png" alt="CSS布局居中对齐，左侧定宽右侧自适应详细介绍" style="max-width:90%" style="max-width:90%" title="CSS布局居中对齐，左侧定宽右侧自适应详细介绍"><br><strong>（3）父元素：<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: flex;justify-content: center;align-items: center;</strong></span>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平垂直居中1</title>
<style type="text/css">
.container{
width: 100%;
height: 400px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.child{
width: 300px;
height: 300px;
background: blue;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>这种方法看起来有些高大上，根本不用理会子元素。
（4）水平居中的方法，父元素：text-align：center
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平垂直居中4</title>
<style type="text/css">
.container{
background: red;
width: 100%;
height: 500px;
text-align: center;
}
.child{
background: blue;
width: 300px;
height: 300px;
margin: auto;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html><span style="font-size: 14px; font-family: Microsoft YaHei">如果子元素里的文字不要水平居中的话，那么用此法将遇到不少麻烦。<strong>（5）水平居中方法，子元素：margin：0 auto;这个好说，不上代码了</strong>好了，关于居中问题就说这么多，如果你还有更好的方法，请告诉我。<br><strong>二、左侧固定宽度，右侧自适应</strong>这是一个比较常见的需求，下面介绍几种实现方法。 （1）左边定宽，左<a href="http://www.php.cn/code/11748.html" target="_blank">浮动</a>，右边不指定宽。</span>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>做固定，右边自适应</title>
<style type="text/css">
body{
margin: 0;
}
.aside{
background: red;
width:200px;
height: 500px;
float: left;
}
.main {
background: blue;
height: 500px;
}
</style>
</head>
<body>
<div>
我是左边的
</div>
<div>
我是主体
我是主体
我是主体
我是主体
我是主体
</div>
</body>
</html>做实验时无意发现了这种方法，意外之喜。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左侧固定右侧自适应</title>
<style type="text/css">
.container {
padding-left: 200px;
width: 100%;
position: relative;
}
.left{
position: absolute;
left: 0;
right: 0;
background: red;
height: 500px;
width: 200px;
}
.right{
background: blue;
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div>
<div>zuobian</div>
<div>
新华社俄罗斯喀山3月23日电（记者 魏良磊）中俄执政党对话机制第六次会议和第五届中俄政党论坛23日在俄罗斯喀山举行。和俄罗斯联邦总统普京分别致贺信。
</div>
</div>
</body>
</html>注意了，absolute是脱离文档流的。.right的100%是相对于父容器的内容宽度的，不是整个宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左边固定，右边自适应</title>
<style type="text/css">
.container{
display: flex;
}
.left{
width: 200px;
height: 500px;
background: red;
}
.right{
background: blue;
height: 500px;
flex: 1;
}
</style>
</head>
<body>
<div>
<div>zuobian</div>
<div>
新华社俄罗斯喀山3月23日电（记者 魏良磊）中俄执政党对话机制第六次会议和第五届中俄政党论坛23日在俄罗斯喀山举行。和俄罗斯联邦总统普京分别致贺信。
</div>
</div>
</body>
</html>弹性盒子很强，有木有。但是有的是要加前缀的，哪些要加自己查去，有一次做实验，电脑样式正确，手机就是不对，搞了好半天。
（4）父：display：table;左右：display：table-cell;左：定宽。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左边固定，右边自适应</title>
<style type="text/css">
.container{
display: table;
}
.left{
width: 200px;
height: 500px;
background: red;
display: table-cell;
}
.right{
background: blue;
height: 500px;
display: table-cell;
}
</style>
</head>
<body>
<div>
<div>zuobian</div>
<div>
新华社俄罗斯喀山3月23日电（记者 魏良磊）中俄执政党对话机制第六次会议和第五届中俄政党论坛23日在俄罗斯喀山举行。罗斯联邦总统普京分别致贺信。
</div>
</div>
</body>
</html>据说这是一种古老的方法，我咋不知道呢？可能我比较年轻吧！
Atas ialah kandungan terperinci CSS布局居中对齐，左侧定宽右侧自适应详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk menjalankan python dalam vscode
Apakah cara untuk melaksanakan skrip Shell?
Apakah alat serangan DDoS?
Apakah perisian ujian dalam talian prestasi komputer?
Bagaimana untuk menyelesaikan ketidakserasian beban pelayan
Cara membuat entri ensiklopedia
Apakah perisian pengaturcaraan mikropengawal?
Syiling kurang nilai untuk disimpan pada tahun 2024
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
