你会用CSS实现垂直居中吗？-天涯论坛

nykek5i 发表于 2024-6-30 06:09:41

你会用CSS实现垂直居中吗？

原文链接：<a style="color: black;">Can you vertically center in CSS?</a>
作者：<a style="color: black;">Usama Tahir</a>
翻译：<a style="color: black;">Klaus</a>
声明：转载请注明出处。

<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-0fd556d567f54ac98c4a393193e37060_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
怎样用CSS（层叠样式表）实现垂直居中呢？这可能是网站研发人者最常问的问题之一了，不论他是有有些经验的研发者还是刚起始学习。
因此，实现垂直居中最好的办法是什么呢？这儿有不止一种办法能够实现。然则你应该选取一种浏览器支持最好的以及最容易实现的。
首要咱们会介绍哪些浏览器支持比较好的办法，结尾部分会介绍哪些浏览器支持较差的办法。
让咱们起始吧……
<h2 style="color: black; text-align: left; margin-bottom: 10px;">用绝对定位实现垂直居中</h2>
咱们有一张照片，并且想让它居中，首要咱们必须创建一个div容器去包裹它，而后给它定义有些样式。
<div style="color: black; text-align: left; margin-bottom: 10px;">HTML
 -----<div>
 <img src=”http://bit.ly/2jeCm3H" alt=”” />
 </div>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;">-----
 CSS
 -----

 body{
 bac公斤round: #ccc; /* just to make it visible in screenshots */
 }
 div{
 width: 300px;
 height: 250px;
 bac公斤round: #fff;
 }
 img{
 width: 100px;
 }
</div>
此刻咱们有了一张包裹在div中的照片，咱们给不但给照片以及div元素定义了尺寸，还给div元素定义了#fff的背景色。
此刻咱们必须给咱们的父元素添加相对定位属性，同期，要给子元素亦就是照片元素添加绝对定位属性。
<div style="color: black; text-align: left; margin-bottom: 10px;">div{
 width: 300px;
 height: 250px;
 bac公斤round: #fff;
 position: relative;
 }
 img{
 width: 100px;
 position: absolute;
 }
</div>
此刻，咱们会将子元素的top属性设置为50%。
<div style="color: black; text-align: left; margin-bottom: 10px;">div{
 width: 300px;
 height: 250px;
 bac公斤round: #fff;
 position: relative;
 }
 img{
 width: 100px;
 position: absolute;
 top: 50%;
 }
</div>
日前为止照片还无实现垂直居中，此刻咱们必须给它一个负的margin-top值，这个值为你想要实现垂直居中的元素高度的一半，在本例中便是那张照片。
*倘若不确定元素的高度，能够不运用margin-top，而是运用transform:translateY(-50%);属性。——译者注
<div style="color: black; text-align: left; margin-bottom: 10px;">div{
 width: 300px;
 height: 250px;
 bac公斤round: #fff;
 position: relative;
 }
 img{
 width: 100px;
 position: absolute;
 top: 50%;
 margin-top: -50px; /* half the size of image */
 }
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-f7e83d34e8a2d0f63745f5e9ec224d94_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>记住：倘若你想要同期实现水平居中

流星的美 发表于 2024-8-23 21:53:04

软文发布平台 http://www.fok120.com/

nykek5i 发表于 2024-10-7 09:33:25

同意、说得对、没错、我也是这么想的等。

页: [1]

天涯论坛's Archiver

你会用CSS实现垂直居中吗？