如何用CSS设置其他div的div中心？

例如我设计了一个边框样式的div，并且我设计了另一个div作为中心，我如何将它设置为较大div的中心？如何用CSS设置其他div的div中心？

.Profile_Photo_Border { 
 
    \t border: 3px solid #052d31; 
 
    \t height: 90px; 
 
    \t width: 90px; 
 
    \t border-radius: 3px; 
 
    } 
 
    .Profile_Photo { 
 
    \t background-color:#005e67; 
 
    \t height: 80px; 
 
    \t width: 80px; 
 
    \t border-radius: 3px; 
 
\t  alignment-adjust:middle; 
 
\t  text-align:center; 
 
    } 
 
\t

<div class="Profile_Photo_Border"> 
 
     <div class="Profile_Photo"></div> 
 
    </div>

来源

2015-07-20 MojtabaSh

添加下面的样式display: flex;到parent div和

margin: 0 auto; 
align-self: center;

孩子div来对齐，居中水平以及垂直。

所以风格成为：

.Profile_Photo_Border { 

    border: 3px solid #052d31; 
    height: 90px; 
    width: 90px; 
    border-radius: 3px; 
    display: flex; 
} 
.Profile_Photo { 
    background-color:#005e67; 
    height: 80px; 
    width: 80px; 
    border-radius: 3px; 
    alignment-adjust:middle; 
    text-align:center; 
    margin: 0 auto; 
    align-self: center; 
}

见琴： “https://jsfiddle.net/ukgnnp4k/”

见截图：

enter image description here

来源

2015-07-20 07:36:39

谢谢你@Nikhil Batra它很有用，再次感谢 – MojtabaSh

GLad帮助你@MojtabaSh :) –

你应该注意到，这是使用flexbox和不兼容Internet Explorer 8或9，可能不是10. [（source ）]（http://caniuse.com/#feat=flexbox）如果你需要支持这些浏览器，它将不起作用。使用5px的 – GregL

试着改变你的CSS：

.Profile_Photo_Border { 
    border: 3px solid #052d31; 
    height: 90px; 
    width: 90px; 
    border-radius: 3px; 
    position: relative; 
} 

.Profile_Photo { 
    background-color: #005e67; 
    height: 80px; 
    width: 80px; 
    border-radius: 3px; 
    text-align:center; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -40px; 
    margin-top: -40px; 
}

这个链接也可能会有所帮助： https://css-tricks.com/centering-css-complete-guide/

来源

2015-07-20 07:27:24 tenderloin

谢谢您的回答，有没有其他较大的div化妆格中心的任何方式，而不使用的宽度和高度。例如，你已经使用了高度的一半高度，反正其他人不使用高度？ – MojtabaSh

你的意思是你没有为（小）子元素指定高度和宽度？ – tenderloin

你的第二个div有10px的大小比第一个更小在高度和宽度。因此，集中中间一个添加边距：5px;到第二个div，Profile_Photo。

来源

2015-07-20 07:35:52 Meera

显然是一个简单的解决方案。 :) – Ravimallya

如果外部div和内部div具有固定宽度，则可以使用css position来对齐内部元素。

请参阅下面的CSS。

.Profile_Photo_Border { 
 
    \t border: 3px solid #052d31; 
 
    \t height: 90px; 
 
    \t width: 90px; 
 
    \t border-radius: 3px; 
 
     position: relative; 
 
    } 
 
    .Profile_Photo { 
 
    \t background-color:#005e67; 
 
    \t height: 80px; 
 
    \t width: 80px; 
 
    \t border-radius: 3px; 
 
\t /* alignment-adjust:middle; No need to use this. */ 
 
\t  text-align:center; 
 
     position: absolute; 
 
     top: 5px; 
 
     left: 5px; 
 
    } 
 
\t

<div class="Profile_Photo_Border"> 
 
     <div class="Profile_Photo"></div> 
 
    </div>

来源

2015-07-20 07:36:18 Ravimallya

.Profile_Photo { 

    background-color:#005e67; 
    height: 80px; 
    width: 80px; 
    border-radius: 3px; 
    margin: 5px auto; 

}

来源

2015-07-20 07:37:55

为您提供了顶部和底部边距。并使用自动，通过指定左边距和右边距，自动将div设置为父div的中心。 –

这里的中心股利的另一种方式无论宽度和高度 - Codepen

.Profile_Photo_Border { 
    border: 3px solid #052d31; 
    height: 90px; 
    width: 90px; 
    border-radius: 3px; 
    position: relative; 
} 
.Profile_Photo { 
    background-color:#005e67; 
    height: 80px; 
    width: 80px; 
    border-radius: 3px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    margin: auto; 
}

而且从CSS技巧一guide为中心的div。

另一个来自Flexbox上的CSS技巧guide这是另一种更好的方法。

希望这可能会帮助你更好地理解。

来源

2015-07-20 07:38:23

请在您的答案中包含相关代码，不要链接到CodePen。为什么，请参阅[这篇文章]（http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers），以及[好回答FAQ]（http://stackoverflow.com/help/how-to-answer）。 – GregL

这里是我的2美分，我使用的显示：table.cell CSS样式：

.Profile_Photo_Border { 
 
    border: 3px solid #052d31; 
 
    height: 150px; 
 
    width: 150px; 
 
    border-radius: 3px; 
 
    display: table-cell; /*added*/ 
 
    vertical-align: middle; /*added*/ 
 
} 
 

 
.Profile_Photo { 
 
    background-color: #005e67; 
 
    height: 80px; 
 
    width: 80px; 
 
    border-radius: 3px; 
 
    text-align: center; /*added*/ 
 
    margin: auto; /*added*/ 
 
}

来源

2015-07-20 07:41:25

您可以添加这个CSS。

.Profile_Photo_Border { 
     border: 3px solid #052d31; 
     height: 90px; 
     width: 90px; 
     border-radius: 3px; 
    } 
    .Profile_Photo { 
     background-color:#005e67; 
     height: 80%; 
     width: 80%; 
     border-radius: 3px; 
     text-align:center; 
     margin:10px auto; 
    }

使用此http://jsfiddle.net/18yao91v/244/

来源

2015-07-20 07:43:45 Steevan

如何用CSS设置其他div的div中心？

回答

相关问题