CSS 水平垂直居中？晓得这几种就够了！-天涯论坛

tw4ld6 发表于 2024-6-30 05:57:13

CSS 水平垂直居中？晓得这几种就够了！

直入主题：
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="parent">
 <span class="child"></div>
 </div>
</div>
1、flex 布局水平垂直居中
<div style="color: black; text-align: left; margin-bottom: 10px;"> .parent {
 display: flex;
 justify-content: center;
 align-items: center;
 }
</div>
2、transform + position 水平垂直居中
<div style="color: black; text-align: left; margin-bottom: 10px;"> .parent {
 position: relative;
 }
 .child {
 position: absolute;left: 50%;top: 50%;
 transform: translate(-50%, -50%);
 }
</div>
3、定宽块级元素水平居中
<div style="color: black; text-align: left; margin-bottom: 10px;">.child{
 display: block;
 width: 40px;
 margin: 0 auto;
 }
</div>
4、内联元素水平居中
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent {
 text-align: center;
 }
</div>
5、内联元素垂直居中
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent {
 height:100px;
 line-height:100px;
 }
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">顺便介绍三种布局：</h2>
1、float布局（还在运用float布局的机构尽可能别去）
经过设置属性 float:left 或 float:right 让元素从左往右流动或从右往左流动，经过设置 margin 属性调节元素的位置，最后清除浮动。
2、绝对定位
给父元素设置 display:relative 给子元素设置 display:absolute 使子元素相针对父元素定位，经过设置 left/right/top/bottom 属性调节元素的位置。
3、flex布局（不可运用flex布局的机构尽可能别去）
给父元素（Flex容器）设置 display:flex；子元素（Flex项目）会默认排成一行，经过设置容器或项目的各样属性来改变项目布局的方式。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">接下来用代码演示三种布局方式</h2>
HTML：
<div style="color: black; text-align: left; margin-bottom: 10px;"><body>
 <div class="father">
 <div class="a">left</div>
 <div class="b">mid</div>
 <div class="c">right</div>
 </div>
 </body>
</div>
CSS：
<div style="color: black; text-align: left; margin-bottom: 10px;">div {
 box-sizing: border-box
 }
 .father {
 height: 300px;
 width: 600px;
 border: 1px solid black;
 }
 .father > div {
 border: 1px solid red;
 width: 150px;
 height: 150px;
 text-align: center;
 line-height: 150px;
 }
</div>
要达到的效果：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-29b4a63e7d4408fa94e0bff1c0b5bf5d_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
1、浮动布局
<div style="color: black; text-align: left; margin-bottom: 10px;">.a {
 float: left;
 }
 .b {
 float: left;
 margin-left: 75px;
 }
 .c {
 float: right;
 }
 .father::after {
 content: ;
 display: block;
 clear: both;
 }/* 清除浮动 */
</div>
2、绝对定位
<div style="color: black; text-align: left; margin-bottom: 10px;">.father {
 position: relative;
 }
 .a {
 position: absolute;
 }
 .b {
 position: absolute;
 left: 225px;
 }
 .c {
 position: absolute;
 right: 0;
 }
</div>
3、flex：我只要两行代码
<div style="color: black; text-align: left; margin-bottom: 10px;">.father{
 display: flex;
 justify-content:space-between;
 }
</div>

wrjc1hod 发表于 2024-10-12 10:31:39

这夸赞甜到心里，让我感觉温暖无比。

页: [1]

天涯论坛's Archiver

CSS 水平垂直居中？晓得这几种就够了！