【css面试题】CSS实现垂直水平居中？-外链论坛

nqkk58 发表于 2024-6-30 05:42:46

【css面试题】CSS实现垂直水平居中？

如题面试中考验应聘者面试者css基本,总会问到怎样水平垂直方向让一个div居中？
【方法一】flex
<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>Document</title>
 </head>
 <style>
 html, body {
 height: 100%;
 }
 #root {
 width: 100px;
 height: 100px;
 bac公斤round-color: #f40;
 }
 body {
 display: flex;
 justify-content: center;
 align-items: center;
 }
 </style>
 <body>
 <div id="root"></div>
 </body>
 </html>
</div>
【方法2】定位(absolute、fixed、relative) + 位移 translate
<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>Document</title>
 </head>
 <style>
 html, body {
 height: 100%;
 }
 #root {
 width: 100px;
 height: 100px;
 bac公斤round-color: #f40;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }

 </style>
 <body>
 <div id="root"></div>
 </body>
 </html>
</div>
【方法3】display: grid; + place-items: center; 
-<a style="color: black;">只要一行代码，实现五种 CSS 经典布局</a>
<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>Document</title>
 </head>
 <style>
 html, body {
 height: 100%;
 }
 #root {
 width: 100px;
 height: 100px;
 bac公斤round-color: #f40;
 margin: 0 auto;
 }
 body {
 display: grid;
 place-items: center;
 }

 </style>
 <body>
 <div id="root">1</div>
 </body>
 </html>
</div>
【方法4】todo margin 0 auto; fail
还在思考中（想经过 margin-top: calc(50% - 100px)）。。。。。margin-top 以以父元素的宽度计算，还会显现外边距重叠 方法废弃欢迎提意见弥补

流星的美 发表于 2024-8-21 11:28:47

i免费外链发布平台 http://www.fok120.com/

qzmjef 发表于 2024-10-27 20:06:12

谷歌外链发布 http://www.fok120.com/

nykek5i 发表于 2024-11-7 14:07:25

你的话语真是温暖如春，让我心生感激。

页: [1]

外链论坛's Archiver

【css面试题】CSS实现垂直水平居中？