鍍金池/ 問答/HTML/ 怎么使得body內(nèi)的一個元素始終居中

怎么使得body內(nèi)的一個元素始終居中

圖片描述

如圖，想要實現(xiàn)不論外面的大盒子即瀏覽器怎樣變化，其內(nèi)的小盒子始終處在大盒子的正中間。試了一些辦法如margin的auto啊，彈性盒模型的center啊，好像都不行。望各位大神指點，謝謝啦0.0

回答
編輯回答
替身

<!DOCTYPE html>
<html>
<head>

<title></title>

</head>
<body>
<style type="text/css">

.box{
    width:100px;
    height: 100px;
    margin:0 auto;
    background: red;

}

</style>

    <div class="box"></div>

</body>
</html>

你把小盒子的width設(shè)置了，在margin: 0 auto

2018年4月3日 15:07
編輯回答
獨白

http://blog.csdn.net/baidu_24...

這種東西百度搜索不是一大堆?
如果不能保持高效自學(xué)能力的話,水平也很難提升的.

2018年2月22日 05:19
編輯回答
有點壞

可以設(shè)置了小盒子寬度后 給小盒子定位 用transform

2017年4月21日 03:57
編輯回答
笨小蛋

查一下資料就好了

2017年1月11日 14:39
編輯回答
柒槿年

這個其實就是一個水平垂直居中的問題，用css有好多種實現(xiàn)方案的，position的定位，css3的flex?？梢詤⒖家幌挛抑皩懙倪@篇水平垂直居中筆記

2017年7月22日 04:09
編輯回答
陌上花
 .box{
    width: 400px;
    height: 400px;
    background-color: #e5e5e5;
    position: relative;
}
.pox{
    width: 100px;
    height: 100px;
    background-color: #000;
    margin: auto;  
    position: absolute;  
    top: 0; left: 0; bottom: 0; right: 0;  
}
//或者
.pox{
    width: 100px;
    height: 100px;
    position: absolute;  
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); 
}
<div class="box">
       <div class="pox"></div>
</div>
2017年5月17日 21:33