元素垂直居中(块级元素、行内元素、图片、多行文本垂直居中)

今天来介绍各种元素垂直居中,很实用哦!

依然是先上图片哦,看好了,是不是有你需要的呢?

元素垂直居中(块级元素、行内元素、图片、多行文本垂直居中)_第1张图片
元素垂直居中(块级元素、行内元素、图片、多行文本垂直居中)_第2张图片
元素垂直居中(块级元素、行内元素、图片、多行文本垂直居中)_第3张图片
元素垂直居中(块级元素、行内元素、图片、多行文本垂直居中)_第4张图片

行内元素垂直居中

  • 利用display: table-cell; vertical-align: middle; 行内元素不能设置宽高,只能靠元素内容撑开, 但是父元素要有宽高的哈,这种相对比较简单;
  • html
   <h2>1、子元素是行内元素h2>
    <div class="big">
        <span class="small">我是行内元素spanspan>
    div>
  • css
.big{
            width: 800px;
            height: 600px;
            background: #cccccc;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .small{
            background: #e87965;
        }

块级元素垂直居中

  • 块级元素的话相对来说就更简单了,有很多种情况,利用margin,padding,position定位,会有很多种方法的,既然是块级元素了肯定宽高是要设置的,否则垂直居中的父子关系也就没什么意义了,随便写了一个相对简单的
  • html

/2、子元素是块级元素

<div class="box"> <div class="box_con">我是块级元素divdiv> div>
  • css
.box{
            width: 800px;
            height: 600px;
            background: #a4afc6;
            text-align: center;
            overflow: hidden;  /*如果不加这个属性,小心内边框凹陷哦*/
        }
        .box_con{
            width: 400px;
            height: 300px;
            margin: 150px auto;
            background: #e8351d;
        }

图片垂直居中

  • 这应该是碰到最多,最不好控制的了,因为大多数我们不想去限制img的宽高,又想让img垂直居中,呼呼,代码见吧
  • html
 <h2>3、子元素是图片h2>
    <div class="big">
        <img src="../img/1.jpg" alt=""  title="我是块级元素img"/>
    div>
  • css
   .big{
            width: 800px;
            height: 600px;
            background: #cccccc;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

-哈哈,其实跟行内元素是一样一样的哦,只是图片的大小不要超过他爸爸哦,否则。。。。

最后,多行文本垂直居中

  • 这个用的应该不是太多吧,但是这是display:table;和display:table-cell;的神奇功效,不能放过呢
  • html
 <h2>4、多行文本垂直居中h2>
    <div class="par">
        <p class="son">天边的最后一抹斜阳,黯淡了,无尽的黑暗将要袭来。我陷入了沉思中去。
            日子一天一天地逝去,从满心不甘至无可奈何,最终落得个与世诀别。即使再不愿,也抵不过光阴的蹉跎,岁月的无情。似一支锋利的针,刺的多了,也便感觉不到疼了。只眼睁睁地盯着指里浸出的血红,一滴,一滴,禁锢了世界。
            “最是人间留不住,朱颜辞镜,花辞树。”从落地开始,便踏入一个无法回头的路程,通往世界的那头。无法静止,无法再来,上天仅予了世人一次机会,一次,不可多得、万般珍贵的机会。
            当然,现在的你,或许是豆蔻年华的少年,性格作风间,满是少年的意气风发,锋芒毕露,好比“少年不识愁滋味,爱上层楼,爱上层楼”“左牵黄,右擎苍”;或是初来乍到的中年人,不必前者,中年人,更加成熟稳重了,当然,也添了更多的责任,有自己的信念,需要去守护。但,时光流逝的匆匆,就有了“无可奈何花落去,似曾相识燕归来”的诗句;又或是已生皱纹,苍苍白发的老人,届时,离路程的尽头,离结束不远了。更多的,也是释然。“高堂明镜悲白发,朝如青丝暮成雪。”操劳了一生,也要停止了。
        p>
    div>
  • css
.par {
            display: table;
            width: 800px;
            height: 600px;
            text-align: center;
            padding: 0 150px;
            box-sizing: border-box;
            background: #156bff;
        }
        .son  {
            display: table-cell;
            background: #c0a2ff;
            vertical-align: middle;
        }
  • 子元素往往会100%宽高继承父级元素,所以如果想设置资源的占比小点的话,是需要给父级元素设置padding属性值的,当然,也要加上box-sizing:border-box;否则子元素会溢出哦。

    最后的最后,整篇代码


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        .big{
            width: 800px;
            height: 600px;
            background: #cccccc;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .small{
            background: #e87965;
        }

        .box{
            width: 800px;
            height: 600px;
            background: #a4afc6;
            text-align: center;
            overflow: hidden;  /*如果不加这个属性,小心内边框凹陷哦*/
        }
        .box_con{
            width: 400px;
            height: 300px;
            margin: 150px auto;
            background: #e8351d;
        }
        .par {
            display: table;
            width: 800px;
            height: 600px;
            text-align: center;
            padding: 0 150px;
            box-sizing: border-box;
            background: #156bff;
        }
        .son  {
            width: 500px;
            display: table-cell;
            background: #c0a2ff;
            vertical-align: middle;
        }
    style>
head>
<body>
<div id="wrapper">

   <h2>1、子元素是行内元素h2>
    <div class="big">
        <span class="small">我是行内元素spanspan>
    div>



    <h2>/2、子元素是块级元素h2>
    <div class="box">
        <div class="box_con">我是块级元素divdiv>
    div>

 
    <h2>3、子元素是图片h2>
    <div class="big">
        <img src="../img/1.jpg" alt=""  title="我是块级元素img"/>
    div>

    <h2>4、多行文本垂直居中h2>
    <div class="par">
        <p class="son">天边的最后一抹斜阳,黯淡了,无尽的黑暗将要袭来。我陷入了沉思中去。
            日子一天一天地逝去,从满心不甘至无可奈何,最终落得个与世诀别。即使再不愿,也抵不过光阴的蹉跎,岁月的无情。似一支锋利的针,刺的多了,也便感觉不到疼了。只眼睁睁地盯着指里浸出的血红,一滴,一滴,禁锢了世界。
            “最是人间留不住,朱颜辞镜,花辞树。”从落地开始,便踏入一个无法回头的路程,通往世界的那头。无法静止,无法再来,上天仅予了世人一次机会,一次,不可多得、万般珍贵的机会。
            当然,现在的你,或许是豆蔻年华的少年,性格作风间,满是少年的意气风发,锋芒毕露,好比“少年不识愁滋味,爱上层楼,爱上层楼”“左牵黄,右擎苍”;或是初来乍到的中年人,不必前者,中年人,更加成熟稳重了,当然,也添了更多的责任,有自己的信念,需要去守护。但,时光流逝的匆匆,就有了“无可奈何花落去,似曾相识燕归来”的诗句;又或是已生皱纹,苍苍白发的老人,届时,离路程的尽头,离结束不远了。更多的,也是释然。“高堂明镜悲白发,朝如青丝暮成雪。”操劳了一生,也要停止了。
        p>
    div>

div>
body>
html>

你可能感兴趣的:(css基础样式)