HTML+CSS水平垂直居中

  啦啦啦,好了,今天来分享自己的第一个知识点,难得自己还能想起来过来博客园,写写博客的。

  好了,言归正传,今天分享关于html和css的一个简单的知识点,对于大部分从事前端开发的人员来说可能都是很简单的,但是,对于我这种患有严重健忘症的人还有一些初入前端的小伙伴来说,整理一下可能是有百利而无一害的。

  今天就简单整理一下前端HTML+CSS实现水平垂直居中的效果

  一 >>> 已知元素宽高

   方法1:

    position:absolute;

    left:0;

    right:0;

    top:0;

    bottom:0;

    margin:auto;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 400px;
height: 400px;
background: rgba(100, 100, 84, .5);
}
.inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
background: #90f5;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner"></div>
</div>
</body>
</html>

  

    下面是效果图:

  HTML+CSS水平垂直居中

  ps:测试的时候还有点小翻车呢,不过问题不大,对子元素设置position:absolute后,元素会脱离文档流进行定位,在父元素上加上position:relative就可以了。

  再贴一张图:

HTML+CSS水平垂直居中

   方法2:

    positionn:absolute;

    left , top:50%;

    //包含块必须是容器

    margin-left,margin-top为负的自身宽高的一半

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.block {
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
width: 400px;
height: 400px;
background: #0ff;
}
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>

    贴个效果图:

HTML+CSS水平垂直居中

  二 >>> 元素宽高未知

   (当然元素宽高已知的居中方法依旧适用于未知宽高的元素,此处不再赘述)

   方法1:   

    position:absolute;

    left , top : 50%;

    //包含块必须是为容器

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.block {
position: absolute;
top: 50%;
left: 50%;
width: 400px; // 没办法,此处必须指定元素的宽高,不过问题不大,假装不知道好了
height: 400px;
transform: translate(-50%, -50%);
background: #0ff;
}
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>

  

  

    运行结果与上图一致,就不再重复贴啦。

    此处,需要关注一个问题,translate()移动的百分比是相对于元素本身的宽高

   方法2:flex布局

    父元素容器display:flex

    align-items : center

    justify-content : conter

    下面是运行效果图:

HTML+CSS水平垂直居中

    flex是CSS3中的属性,因此在移动端构建弹性盒模型时,如果想用flex就必须要考虑浏览器兼容性。

  三 >>> 单行文本居中

   方法1:text-align:center;  //水平方向居中 (在父元素中设置)

        line-height:$(父元素的高度)//垂直方向居中 (在文本元素中设置)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.block {
position: absolute;
top: 50%;
left: 50%;
width: 400px; // 没办法,此处必须指定元素的宽高,不过问题不大,假装不知道好了
height: 400px;
transform: translate(-50%, -50%);
background: #0ff;
}
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>

    贴个图:

HTML+CSS水平垂直居中

    2019年,大家都要加油呀!

  四 >>> 图片元素居中

    图片元素比较特殊,其display属性值为inline-block,意味着图片元素既有块级元素的特性,例如可以指定宽高等,同时具备行级元素的特性。因此,图片的水平垂直居中的实现可以用未知宽高和已

    知宽高元素的居中方式来实现,此处介绍图片元素一种特殊的水平居中方式。

    在图片元素的父元素上加text-align:center

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 400px;
height: 400px;
background: rgba(100, 100, 84, .5);
text-align: center;
}
.text {
line-height: 400px;
}
</style>
</head>
<body>
<div class="wrapper">
<span class="text">hello,2019年加油</span>
</div>
</body>
</html>

  

    运行效果贴图:

HTML+CSS水平垂直居中

    从网上随便拉了张图,不知道会不会构成侵权呢。不管了,用了再说...

    

    今天一整天都在复习计算机网络,全英文1000页,忽然有点慌了

至此,停笔。

2019-01-04  00:42:23

上一篇:HTML/CSS实现文字环绕图片布局


下一篇:Java核心:类加载和JVM内存的分配