将绝对定位的 div 居中

Posted 2023-03-05

【中文标题】将绝对定位的 div 居中

【英文标题】：Centering an absolute positioned div

【发布时间】：2015-09-12 06:55:35

【问题描述】：

我需要将包裹在另一个 div 中的这个 div 居中：

要居中的Div：

.post-username 
    padding: 10px;
    background: #000;
    border-radius: 4px;
    position: absolute;
    top: 0;

它应该在这个内部居中：

.post 
    background: #3e4758;
    overflow: hidden;
    border-radius: 4px;
    width: 270px;
    height: 330px;
    position: relative;

【问题讨论】：

可能重复***.com/questions/15376634/… ?

那么 div .post-username 应该是灵活的，并且为其设置宽度可能是个坏主意，因为某人的用户名可能是两个字符，而某人是十二个字符？

【参考方案1】：

.post-username 
    padding: 50px;
    background: #000;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);


.post 
    background: #3e4758;
    overflow: hidden;
    border-radius: 4px;
    width: 270px;
    height: 330px;
    position: relative;

【参考方案2】：

.post-username 
padding: 10px;
background: #000;
border-radius: 4px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);


.post 
background: #3e4758;
overflow: hidden;
border-radius: 4px;
width: 270px;
height: 330px;
position: relative;

<div class="post">
<div class="post-username">asdasd</div>

</div>