定宽高的div元素垂直水平居中

ゝ一纸荒年。 2021-12-18 07:47 268阅读 0赞

![1488621-20190528160226952-1274501532.png][]

**关键点**在于：采用绝对定位，使元素盒子左顶点位于垂直居中位置，再设置margin-left与margin-top值，使元素中心位于垂直居中位置。

贴上代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>固定高度div写法</title>
         <style>
             body {
          
                background: #abcdef;
             }
            .son {
          
                width: 200px;
                height: 100px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -100px;
                margin-top: -50px;
                border: 1px solid red;
            }
         </style>
    </head>
    <body>
            <div class="son"></div>
    </body>
    
    </html>

效果图：

![1488621-20190528161344079-657164260.png][]

转载于:https://www.cnblogs.com/caoxueying2018/p/10938091.html

[1488621-20190528160226952-1274501532.png]: /images/20211218/b9c4fdb31a2847b4b22aae55cbd296e9.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211218/e83c61f1f91a4fc4b84de372a7c17ea7.png
[1488621-20190528161344079-657164260.png]: /images/20211218/3a8122b180464575875da0cda6f60f7b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，268人围观）

还没有评论，来说两句吧...

相关阅读

相关 div水平垂直居中

一、水平居中： 1、div盒子水平居中：比较容易，直接设置div元素的margin: 0 auto就可以实现。 2、div里面的内容水平居中：text-align:cent

朴灿烈づ我的快乐病毒、/ 2022年12月07日 01:14/ 0 赞/ 258 阅读

相关子div水平垂直居中及 div中label水平垂直居中

<html lang="en"> <head> <meta charset="UTF-8"> <meta http-e

客官°小女子只卖身不卖艺/ 2022年11月06日 15:54/ 0 赞/ 227 阅读

相关未知宽高元素垂直水平居中

在前端布局中，不可避免的会让元素垂直水平居中，已达到某种效果，那么这个元素按照是否知道宽高来分为已知宽高，未知宽高 1.借助table的td中的元素下面介绍的方

旧城等待，/ 2022年09月30日 13:48/ 0 赞/ 168 阅读

相关 div水平垂直居中

.main\{width:960px;height:658px;position:absolute;top:50%;left:50%;margin-top:-329px;mar

向右看齐/ 2022年08月23日 12:47/ 0 赞/ 275 阅读

相关 HTML中，不固定宽高的元素在DIV中水平并且垂直居中

效果如下： ![Center][] ![Center 1][] 代码如下： <html> <style> .pr

ゝ一世哀愁。/ 2022年06月04日 06:21/ 0 赞/ 213 阅读

相关 css 不定宽高元素水平垂直居中

方法三种，可以根据实际需求选择。方法一 <body> <div id="box"> <div id="

快来打我*/ 2022年05月11日 11:06/ 0 赞/ 216 阅读

相关 CSS未知宽高的元素，水平垂直居中

方法一：使用定位思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%) 优点：高大上,

男娘i/ 2022年04月13日 09:44/ 0 赞/ 215 阅读

相关宽高都200px的div在浏览器窗口居中（水平垂直都居中）

1.fixed,从中间移动定位 position:fixed;width:200px;height:200px;left:50%;top:50%;

心已赠人/ 2022年02月21日 00:50/ 0 赞/ 199 阅读

相关未知图片宽高水平垂直居中

![这里写图片描述][20160328213110837] <!DOCTYPE html> <html> <head>

我就是我/ 2022年01月26日 12:05/ 0 赞/ 225 阅读

相关定宽高的div元素垂直水平居中

![1488621-20190528160226952-1274501532.png][] 关键点在于：采用绝对定位，使元素盒子左顶点位于垂直居中位置，再设置margin-l

ゝ一纸荒年。/ 2021年12月18日 07:47/ 0 赞/ 269 阅读