CSS 怎么样居中一个元素-外链论坛 - Powered by Discuz! Archiver

219mze 发表于 2024-6-30 09:55:18

CSS 怎么样居中一个元素

<h2 style="color: black; text-align: left; margin-bottom: 10px;">前言</h2>
本文重点介绍水平居中，垂直居中，还有水平垂直居中各样办法，思维导图如下： 
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-9a639a296d535ffb68380027eb7172e5_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1、水平居中</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">1.行内元素水平居中</h3>
利用 text-align: center 能够实此刻块级元素内部的行内元素水平居中。此办法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{//在父容器设置
 text-align:center;
 }
</div>
另外，倘若块级元素内部包着亦是一个块级元素，咱们能够先将其由块级元素改变为行内块元素，再经过设置行内块元素居中以达到水平居中。
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="parent">
 <div class="child">Demo</div>
 </div>
 <style>
 .parent{
 text-align:center;
 }
 .child {
 display: inline-block;
 }
 </style>
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">2.块级元素的水平居中</h3>
这种情形能够有多种实现方式，下面咱们仔细介绍:
<h3 style="color: black; text-align: left; margin-bottom: 10px;">①将该块级元素上下外边距margin-left和margin-right设置为auto</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">.child{
 width: 100px;//保证该块级元素定宽
 margin:0 auto;
 }
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">②运用table+margin</h3>
先将子元素设置为块级表格来表示（类似），再将其设置水平居中
display:table在表现上类似block元素，然则宽度为内容宽。
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="parent">
 <div class="child">Demo</div>
 </div>
 <style>
 .child {
 display: table;
 margin: 0 auto;
 }
 </style>
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">③运用absolute+transform</h3>
先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后经过向左移动子元素的一半宽度以达到水平居中。
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="parent">
 <div class="child">Demo</div>
 </div>
 <style>
 .child {
 position:absolute;
 left:50%;
 transform:translateX(-50%);
 }
 .parent {
 position:relative;
 }
 </style>
</div>
不外transform属于css3内容，兼容性存在必定问题，高版本浏览器必须添加有些前缀。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">④运用flex+justify-content</h3>
经过CSS3中的布局利器flex中的justify-content属性来达到水平居中。
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="parent">
 <div class="child">Demo</div>
 </div>
 <style>
 .parent {
 display: flex;
 justify-content:center;
 }
 </style>
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">⑤运用flex+margin</h3>
经过flex将父容器设置为为Flex布局，再设置子元素居中。
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="parent">
 <div class="child">Demo</div>
 </div>
 <style>
 .parent {
 display: flex;
 }
 .child {
 margin:0 auto;
 }
 </style>
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">3.多块级元素水平居中</h3>

情迷布拉格 发表于 2024-9-3 16:15:57

你的留言真是温暖如春，让我感受到了无尽的支持与鼓励。

1fy07h 发表于 2024-9-30 04:08:12

“BS”（鄙视的缩写）‌

页: [1]

外链论坛's Archiver

CSS 怎么样居中一个元素