CSS学习笔记(九) 居中方案
<p>在 CSS 中，居中对齐是我们常常需要用到的布局方式，下面介绍一些常用的居中方法</p><h3 id="1文字居中">1、文字居中</h3>
<p>（1）文字水平居中</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 500px;
height: 300px;
border: 1px solid black;
text-align: center; /* 设置文字居中对齐 */
}
</style>
</head>
<body>
<div class="box">
<p class="item">我居中啦<br/>我居中啦</p>
<p class="item">我也居中啦</p>
</div>
</body>
</html>
</code></pre>
<p>（2）文字垂直居中</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 500px;
height: 300px;
border: 1px solid black;
display: table-cell; /* 设置元素生成框的类型为 表格单元 */
vertical-align: middle; /* 设置元素垂直对齐方式为 中线对齐*/
}
</style>
</head>
<body>
<div class="box">
<p class="item">我居中啦<br/>我居中啦</p>
<p class="item">我也居中啦</p>
</div>
</body>
</html>
</code></pre>
<p>（3）文字垂直居中</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 500px;
height: 300px;
border: 1px solid black;
line-height: 300px; /* 设置 lin-height 属性，值与 height 属性相等 */
}
.item {
margin: 0;/* 设置 margin值为 0，防止偏移 */
padding: 0; /* 设置 padding 值为 0，防止偏移 */
display: inline-block;/* 设置元素生成框的类型为 行内块框 */
vertical-align: middle; /* 设置元素垂直对齐方式为 中线对齐 */
line-height: 24px; /* 设置行高，覆盖父元素设置 */
}
</style>
</head>
<body>
<div class="box">
<p class="item">我居中啦<br/>我居中啦</p>
<p class="item">我也居中啦</p>
</div>
</body>
</html>
</code></pre>
<h3 id="2块框居中">2、块框居中</h3>
<p>（1）块框水平居中</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 500px;
height: 300px;
background: black;
border: 1px solid black;
}
.item {
width: 100px;
height: 100px;
background: gray;
border: 1px solid white;
margin: 0 auto; /* 设置外边距，上下外边距为 0，左右外边距为 auto（自动居中处理） */
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>
</code></pre>
<p>（2）块框垂直居中</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 500px;
height: 300px;
background: black;
border: 1px solid black;
position: relative; /* 设置 position 为 relative */
}
.item {
width: 100px;
height: 100px;
background: gray;
border: 1px solid white;
position: absolute;/* 设置 position 为 absolute */
top: 50%; /* 距离定位元素顶部 50% */
transform: translateY(-50%); /* 沿着 Y 轴反向偏移 50% */
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>
</code></pre>
<p>（3）块框水平、垂直居中</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 500px;
height: 300px;
background: black;
border: 1px solid black;
display: flex; /* 使用 Flex 布局 */
flex-direction: row; /* 设置主轴沿着水平方向 */
justify-content: center; /* 设置沿着主轴对齐方式 居中对齐 */
align-items: center; /* 设置沿交叉轴对齐方式 居中对齐 */
}
.item {
width: 100px;
height: 100px;
background: gray;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>
</code></pre>
<p>【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】</p>
</div>
<div id="MySignature" role="contentinfo">
版权声明：本博客属于个人维护博客，未经博主允许不得转载其中文章。<br><br>
来源：https://www.cnblogs.com/wsmrzx/p/11458278.html
頁:
[1]