作为一个初级的前端工程师,在开发的过程中遇到了许多问题,其中使元素垂直居中这个问题难住了我,可能在大家看来这是一个非常小的问题,但是却困扰了我很长时间,于是决定做一个总结!!!

废话不多说,直接上代码,里面有我的思考过程

案例一

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>div实现垂直居中</title>

</head>

<style>

.abc {

    width: 200px;

    height: 200px;

    background: green;

    position: absolute;

    left: ;

    top: ;

    bottom: ;

    right: ;

    margin: auto;

}

.box {

    position: relative;

    width: 500px;

    height: 500px;

    background: red;

    display: inline-block;

}

</style>

<div class="box">

    <div class="abc"> </div>

</div>

<body>

</body>

</html>

案例二(文字的水平垂直居中)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <style>

    div {

        height: 300px;

        width: 200px;

        display: table;

        background: #;

    }

    span {

        display: table-cell;

        vertical-align: middle;

    }

    </style>

    <div>

        <span>我是span</span>

    </div>

</body>

</html>

案例三

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>div实现垂直居中</title>

</head>

<style>

.abc {

    width: 200px;

    height: 200px;

    background: green;

    position: absolute;

    left: %;

    top: %;

    margin-left: -100px;

    margin-top: -100px;

}

.box {

    position: relative;

    width: 500px;

    height: 500px;

    background: red;

    display: inline-block;

}

</style>

<div class="box">

    <div class="abc"> </div>

</div>

<body>

</body>

</html>

案例四

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>div实现垂直居中</title>

</head>

<style>

/*

table-cell实现居中

将父盒子设置为table-cell元素，设置

text-align:center,vertical-align: middle;

子盒子设置为inline-block元素

*/

.ok {

    width: 200px;

    height: 200px;

    background: red;

    display: table-cell;

    /*这个必须是table-cell*/

    /*父级是一个小表格,表格默认是放文字的,子集是一个小果冻元素,给父级设置vertical-align:middle使元素垂直居中*/

    text-align: center;

    vertical-align: middle;

}

.innerBox {

    width: 100px;

    height: 100px;

    background: green;

    display: inline-block;

    /*注意:里面的元素必须是inline-block*/

}

</style>

<body>

    <div class="ok">

        <div class="innerBox">

        </div>

    </div>

</body>

</html>

案例五

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <style>

    /* 注意:该方法值适合文字的水平垂直居中;

     * 父级高度固定，嵌套行内元素

     *关键属性：父级:diaplay:tabel; 子集：display:tabel-cell; vertical-align:middle;

     */

    .div {

        height: 300px;

        width: 200px;

        display: table;

        /*这么理解:父级是一个固定宽度高度的大表格*/

        background: #;

    }

    .span {

        display: table-cell;

        /* 子集是父级表格里面的一个小格,设置display:table-cell,给父级设置垂直居中*/

        vertical-align: middle;

    }

    </style>

    <div class="div">

        <div class="span">sddddd</div>

    </div>

</body>

</html>

【css基础修炼之路】— 谈谈元素的垂直水平居中的更多相关文章

  1. 【CSS基础】实现 div 里的内容垂直水平居中

    方案一: 所有内容垂直水平居中 兼容性:IE8+. 条件:内容宽度和高度可以未知,可以是多行文字.图片.div. 描述:使用table-cell + vertical-align , html代码见文 ...

  2. HTML&CSS基础-内联和块元素

    HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  3. js实现未知宽高的元素在指定元素中垂直水平居中

    js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...

  4. css中各种情况下的元素的垂直和水平居中的问题

    问题:外边是一个容器,容器中还有一个容器,那么请问怎么让里边的容器垂直水平居中显示?? No1: 外边的容器宽度和高度确认,里边是行内元素 .container{width:200px; height ...

  5. CSS样式—— 字体、元素的垂直水平居中

    1.CSS样式与HTML中标签属性的区别: 标签的属性是采用 属性名=“属性值” 表示的 CSS样式是采用名值对 属性名:属性值: 表示的 2.内联元素(行内元素)与块元素 (1)内联元素及其特点: ...

  6. 探究css中各种情况下的元素的垂直和水平居中的问题(面试题)

    今天各种纠结,真的是不想写东西(ps 我比较懒)但是老是有人问这个问题,于是我就本着分享精神还是整理一下,好了废话不多说 开始上代码 问题:外边是一个容器,容器中还有一个容器,那么请问怎么让里边的容器 ...

  7. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  8. 【js基础修炼之路】- 手把手教你实现bind

    手写bind前我们先回顾一下bind有哪些特性,以便更好的理解bind和实现bind. bind的特性 var obj = { a: 100, say(one, two) { console.log( ...

  9. 【js基础修炼之路】- 微任务,宏任务和Event-Loop

    一段代码让你了解Event-Loop console.log(1); setTimeout(() => { console.log(2); }, 0); new Promise((resolve ...

随机推荐

  1. 求（3+开根5） N次方的整数部分最后3位

    求(3+开根5) N次方的整数部分最后3位,请补足前导零 . 分析:首先(1)=(3+开根5) N次方的展开为 an + bn * 根号5 的形式   . 同时也有 (2)=(3-开根5) N次方 = ...

  2. ubuntu中误删/var/lib/dpkg/info的补救方法

    今晚在ubuntu上安装一个软件时,出现这样的错误提示:E: Sub-process /usr/bin/dpkg returned an error code (1)然后在网上找了查找问题原因及解决方 ...

  3. 通过JS，按照原比例控制图片尺寸

    <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con ...

  4. 用dango框架搭建博客网站

    1.我早先下载了Anaconda35.0.1.但是Anaconda自带的编辑器Spyder我用的不太熟练.所以还是使用Pycharm来编辑代码.我的Pycharm试用期已经到了,所以需要注册码来使用P ...

  5. Dockerfile的书写规则和指令的使用方法

    Dockfile是一种被Docker程序解释的脚本,Dockerfile由一条一条的指令组成,每条指令对应Linux下面的一条命令.Docker程序将这些Dockerfile指令翻译真正的Linux命 ...

  6. Java-IO读写文件简单操作2

    承接Java-IO读写文件简单操作,这里再次写个小demo巩固一下知识点. 代码文件:demo.java package com.test.demo; import java.io.*; public ...

  7. python xml dom

    http://www.cnblogs.com/coser/archive/2012/01/10/2318298.html

  8. [转]jQuery调用ASPX返回json

    本文转自:http://www.cnblogs.com/fire-phoenix/archive/2009/11/13/1614146.html 本文介绍如何在ASP.NET(ASP.NET/AJAX ...

  9. Murano Weekly Meeting 2015.10.13

    Meeting time: 2015.October.13th 1:00~2:00 Chairperson:  Serg Melikyan, PTL from Mirantis Meeting sum ...

  10. MATLAB矩阵操作和算术运算符

    矩阵的表示 矩阵之间用空格或者是逗号间隔 矩阵可以拼接(可以用矩阵拼接) 实部矩阵和虚部矩阵构成复数矩阵,一一对应. 冒号表达式: 格式: e1:e2:e3 e1表示初始值    e2表示步长   e ...