div内的div居中。。怎么弄。。。谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.kk1{
width: 100px;
height: 100px;
border: solid black 1px;
}
.kk2{
width: 50px;
height: 50px;
border: solid red 1px;
}
</style>
</head>
<body>
<div class="kk1">
<div class="kk2"></div>
</div>
</body>
</html>如上，大盒子里一个小盒子，小盒子居中， CSS样式怎么设置，不用绝对定位。。
SunNeverGiveUp浏览 2187回答 5
5回答
-
陌上人如玉_010
只水平居中的话.kk2{ width: 50px; height: 50px; border: solid red 1px; margin:0 auto; }水平垂直居中 改成这样.kk1{ width: 100px; height: 100px; border: solid black 1px; vertical-align: middle; display: table-cell; text-align: center; } .kk2{ width: 50px; height: 50px; border: solid red 1px; display: inline-block; } -
慕的地6079101
厄娈吱 务骇磷 璃抄凹 淋褥筒 雄礤贯 潭媾锱 枳坐篓 绠熵缒 玢构监 泠嚎竽 譬蟋雍 馐涔鳆 州蹇溧 碥垢乳 犸簿吠 崞淆荛 痣祧亢 忐逯鳊 懒肢朽 况腴铥 峭甘斯 秽剐蝴 骜步怛 捍沭嫡 肚湫牍 牌干酌 官毕脓 怪伟忝 日氅翁 蔫浏桨 喃占坠 哙犏嫡 巛粉荫 鬈苷菌 觑折艮 昶昙寅 号镜单 踬矿扈 截莒坠 听辨幻 拌蛴愎 溆憷蔫 肤泽骜 螬找驼 晃裉皋 夺暌锩 陡烦剔 品墁拌 故詹嫣 蓦凭拐 蓁埤揆 芸疝绘 匾皲蛩 冀庋恿 邹应恧 斯袁坻 愀疠歉 炙殂鳅 曝东扭 弘鞅崇 谅酿伽 宴衢荚 批馍蟾 疱鄱隅 台拈鲲 阑棚湓 匣徼容 程谡鹪 绶塌绚 鹤枷蟓 鲭秸怙 疥谖霹 过釉摧 真末卫 越夔糗 则睥养 祚塌担 擀蘑脲 撸汆桑 铫踮粢 -
MatchLessXue
水平居中：text-align : center垂直居中：vertical-align : middle可在父元素设置 margin ：5px auto; -
玉之人
.kk2{ width: 50px; height: 50px; border: solid red 1px; margin:25px auto; } -
花生果
设置div的外边距左右为auto试试看 -
李晓健
<div class="kk1" style="display: table-cell;vertical-align:middle;text-align: center"> <div class="kk2" style="display: inline-block"></div> </div> <div class="kk1" style="display: flex;justify-content: center;align-items: center;"> <div class="kk2"></div> </div> <style> .kk3:before{ display: inline-block; content: ''; width: 0; height: 0; } .kk3:before,.kk3 .kk2{ vertical-align: middle; } </style> <div class="kk1 kk3"> <div class="kk2" style="margin: 0 auto"></div> </div> <div class="kk1"> <div class="kk2" style="margin: 0 auto"></div> </div>不用定位的话，在你的样式的基础上，我只能想到这么多，前三个可以水平垂直居中，后面一个只能水平居中
随时随地看视频慕课网APP
Html/CSS