css水平垂直居中的几种方式-外链论坛

fny5jt9 发表于 2024-6-30 05:27:07

css水平垂直居中的几种方式

<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;"><span style="color: black;">读心悦</span><span style="color: black;"><span style="color: black;"></span>qingzhuyue.cn/</span></span></a></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在前端岗位快三年了。布局中关于水平垂直两个方向居中的实现有几种方式：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">方式一：将容器设置为弹性容器，即display: flex;,在水平和垂直两个方向分别设置居中对齐。完整代码如下：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>css水平垂直居中对齐</title>
   <style>
   body{
   font-size: 30px;
   min-height: 100vh;
   bac<span style="color: black;">公斤</span>round-color: aqua;
   display: flex;
   align-items: center;/*垂直方向居中*/
   justify-content: center;/*水平居中*/
   }
   /* #center{
   width: 300px;
   height: 300px;
   border: 1px solid red;
   text-align: center;
   line-height: 300px;
   } */
   </style>
   </head>
   <body>
   <div id="center">水平垂直居中</div>
   </body>
   </html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这个方式<span style="color: black;">没</span>论<span style="color: black;">没</span>论子元素<span style="color: black;">是不是</span>设置width和height，都可行！</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">方式二：子元素设置固定的width和height，<span style="color: black;">运用</span>绝对定位进行居中设置：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>css水平垂直居中对齐</title>
   <style>
   body{
   font-size: 30px;
   min-height: 100vh;
   bac<span style="color: black;">公斤</span>round-color: aqua;
   position: relative;
   }
   /* 子元素设置<span style="color: black;">详细</span>的width和height */
   #center{
   width: 300px;
   height: 300px;
   border: 1px solid red;
   text-align: center;
   line-height: 300px;
   margin:auto;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   }
   </style>
   </head>
   <body>
   <div id="center">水平垂直居中</div>
   </body>
   </html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">或</span>是：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">/* 子元素设置<span style="color: black;">详细</span>的width和height */
   #center{
   width: 300px;
   height: 300px;
   border: 1px solid red;
   text-align: center;
   line-height: 300px;
   margin:auto;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -150px;
   margin-top: -150px;
   }</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>css3中的变换属性：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">/* 子元素设置<span style="color: black;">详细</span>的width和height */
   #center{
   width: 300px;
   height: 300px;
   border: 1px solid red;
   text-align: center;
   line-height: 300px;
   margin:auto;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   }</div>

听听海 发表于 2024-8-31 11:27:33

谢谢、感谢、感恩、辛苦了、有你真好等。

wrjc1hod 发表于 2024-9-30 10:01:02

外链发布社区 http://www.fok120.com/

m5k1umn 发表于 6 天前

期待与你深入交流，共探知识的无穷魅力。

页: [1]

外链论坛's Archiver

css水平垂直居中的几种方式