CSS 水平+垂直居中的方式-天涯论坛

f9yx0du 发表于 2024-6-30 05:29:34

CSS 水平+垂直居中的方式

关于CSS 水平+垂直居中的问题，研发代码的过程中，会经常遇到。
那样，在这儿，我会介绍几种方式，来实现CSS的水平+垂直居中。
首要，咱们先将body,html的高度和宽度设置为100%，其次清除默认样式，margin和padding设置为0。
写个宽度和高度均为200px，青色的方块。
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>index</title>
 <style>
 html,body{
 bac公斤round:#2d3436;
 height:100%;
 width:100%;
 }
 *{
 margin:0;
 padding:0;
 }
 .box{
 width:200px;
 height:200px;
 bac公斤round:#81ecec;
 }

 </style>
 </head>
 <body>
 <div class="box"></div>
 </body>
 </html>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-43637f8b5ba84ff6fd5f821d8b549959_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
水平居中则能够用 margin: 0 auto;来设置。
咱们都晓得元素平时的默认状态是position = static (静态)。
垂直居中必须使 position = relative ，这般就能够用top 属性，使其移动。
另运用margin-top属性，由于自己是200px高度，因此减去自己一半的高度，就能够垂直居中。
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>index</title>
 <style>
 body,html{
 bac公斤round:#2d3436;
 height:100%;
 width:100%;
 }
 *{
 margin:0;
 padding:0;
 }
 .box{
 width:200px;
 height:200px;
 bac公斤round:#81ecec;
 }
 .loca{
 margin:0 auto; /* 水平居中 */
 position: relative; /* 绝对定位 */
 top:50%; /* 偏移 */
 margin-top:-100px; /*减去自己高度一半*/
 }
 </style>
 </head>
 <body>
 <div class="box loca"></div>
 </body>
 </html>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-e7528c2f975e58fc74b35d70aab64d75_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
这般就实现垂直居中的效果。
CSS3的transform的属性亦能够实现向上偏移的效果。
transform:translateY(-50%) 意思是偏移自己高度的一半。
效果如下：
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>index</title>
 <style>
 body,html{
 bac公斤round:#2d3436;
 height:100%;
 width:100%;
 }
 *{
 margin:0;
 padding:0;
 }
 .box{
 width:200px;
 height:200px;
 bac公斤round:#81ecec;
 }
 .loca{
 margin:0 auto; /* 水平居中 */
 position: relative; /* 绝对定位 */
 top:50%; /* 偏移 */
 /* margin-top:-100px; */
 transform:translateY(-50%);
 }
 </style>
 </head>
 <body>
 <div class="box loca"></div>
 </body>
 </html>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-95b6ca8533127b71e8552ac0df7ecc9d_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;">水平垂直居中js.jirengu.com/qoloyemuno/1/edit?html,output<img src="https://pic1.zhimg.com/v2-431c5bc6e396131dd6a529c496785f78_ipico.jpg" style="width: 50%; margin-bottom: 20px;"></a></div>
以上两种办法的代码链接。
另一CSS3中还有种办法 FLEX布局，实现水平垂直居中的办法。
<a style="color: black;">htt</a>p://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 阮一峰老师的博客，大众能够瞧瞧，针对布局非常有帮忙。
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>index</title>
 <style>
 body,html{
 bac公斤round:#2d3436;
 height:100%;
 width:100%;
 }
 *{
 margin:0;
 padding:0;
 }
 body{
 display:flex;
 align-items:center;
 justify-content:center;
 }
 .box{
 width:200px;
 height:200px;
 bac公斤round:#81ecec;
 }
 </style>
 </head>
 <body>
 <div class="box"></div>
 </body>
 </html>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-95b6ca8533127b71e8552ac0df7ecc9d_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>

akbchina.cn 发表于 2024-8-27 21:01:20

可以发布外链的网站 http://www.fok120.com/

nqkk58 发表于 2024-10-3 02:35:01

这篇文章真的让我受益匪浅，外链发布感谢分享！

页: [1]

天涯论坛's Archiver

CSS 水平+垂直居中的方式