醉梦孤城的个人博客

记录我旅程美好的风景

Open Source, Open Mind,
Open Sight, Open Future!
  menu
9 文章
19681 浏览
2 当前访客
ღゝ◡╹)ノ❤️

关于html盒子居中学习心得

盒子居中

盒子居中问题由来

在项目开发中经常会碰到盒子居中问题。比如导航栏的制作,版芯的制作等等。。。。

盒子居中的几种方法

1. 第一种:利用盒子外边距实现的居中效果

代码如下:


.div {
//盒子的上下方向外边距为0(可以更改),左右外边距自适应(不能够更改)。
margin: 0  auto;


}
</style>

此方法最为简单,但是缺点是实际开发中很难符合需求。

2. 第二种:使用定位和盒子外边距配合实现的居中

第一种:代码如下:
<style>

/* 父盒子样式 */

.father {

width: 200px;

height: 200px;

/* 相对定位 */

position: relative;

}

/* 子盒子样式 */

.son {

width: 50px;

height: 50px;

/* 绝对定位 */

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

}

</style>
第二种:代码如下:
<style>

/* 父盒子样式 */

.father {

width: 200px;

height: 200px;

/* 相对定位 */

position: relative;

}

/* 子盒子样式 */

.son {

width: 50px;

height: 50px;

/* 绝对定位 */

position: absolute;

left: 50%;

top: 50%;

/* 值为子盒子宽度的一半 */

margin-left: -25px;

/* 值为子盒子高度的一半 */

margin-top: -25px;

}

</style>
第三种:代码如下:
<style>

/* 父盒子样式 */

.father {

width: 200px;

height: 200px;

/* 相对定位 */

position: relative;

background: red;

  

}

/* 子盒子样式 */

.son {

width: 50px;

height: 50px;

/* 绝对定位 */

position: absolute;

left: 50%;

top: 50%;

/* 此处百分号是相对于盒子自身的宽和高 */

transform: translate(-50%, -50%);

}

</style>
  • 第三种方法其实就是第二种方法的变形,只不过相对于第二种来说比较方便一点不用我们自己计算具体的数值。
    以上就是博主最近学习html的一点感悟分享给大家,当然有不同见解的童鞋可以私聊博主进行讨论。欢迎骚扰。

标题:关于html盒子居中学习心得
作者:zuimenggucheng
地址:http://chengwy.top:8080/articles/2019/08/16/1565948583135.html