<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        html,body{

            width: 100%;

            height: 100%;

            font-size: 16px;

        }

        *{margin: 0;padding: 0;}

        .box1{

            width: 200px;height: 200px;

            background: #eee;

            margin-top: 10px;

            /*定位居中*/

            position: relative;

        }

        .box2{

            width: 200px;height: 200px;

            background: #eee;

            margin-top: 10px;

            /*margin居中*/

            position: relative;

        }

        .box3{

            width: 200px;height: 200px;

            background: #eee;

            margin-top: 10px;

            /*inline居中*/

            text-align: center;

        }

        /*定位+transform居中*/

        .box1 div{border: 1px solid #000;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)}

        /*margin居中*/

        .box2 div{border: 1px solid #000;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin:auto;width: 100px;height: 50px}

        /*inline居中*/

        .box3 div{border: 1px solid #000;display: inline-block;vertical-align: middle;}

        .box3:before{content: '';  display: inline-block;  height: 100%;  vertical-align: middle;}

    </style>

</head>

<body>

<div class="box1">

    <div>我想居中</div>

</div>

<div class="box2">

    <div>我想居中</div>

</div>

<div class="box3">

    <div>我想居中</div>

</div>

</body>

</html>

demo:https://controllerone.github.io/test/

css上下左右居中的更多相关文章

  1. CSS上下左右居中对齐

    上下左右居中对齐 display:  inline/inline-block 将父元素(容器)设定 text-align: center: 即可左右置中. display: block 将元素本身的 ...

  2. CSS上下左右居中的几种方法

    1.absolute,margin: auto .container { position: relative; } .content { position: absolute; margin: au ...

  3. css：子元素div 上下左右居中方法总结

    最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...

  4. 只用CSS实现容器内图片上下左右居中

    一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...

  5. css布局之块上下左右居中

    以下方案的通用代码: HTML code: <div class="box"> <div class="content"> <!- ...

  6. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  7. CSS 控制元素 上下左右居中

    不说废话,直接 搞起..... 首先,我们将题目 <css控制元素上下左右居中> 分析一下哈,我是将其分成了4部分信息: 1.CSS控制: 只用 CSS 来达成目的 2.元素:  不只是d ...

  8. css div上下左右居中

    相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设  content 要在f里上下左右居中 <div class＝ ...

  9. div元素上下左右居中

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. dataset datatable 转json

    class ToJosn { #region dataTable转换成Json格式 /// <summary> /// dataTable转换成Json格式 /// </summar ...

  2. AutoIt自动化编程(4)【转】

    五.自动化操作轻松入门系列5 控件操作 然而,在真正实现自动化时仅靠上面的技术往往难以达到预期目的.下面开始进入最为重要的控件操作. 1.设置文本 在安装软件的过程中用户往往需要提供一些必需信息,比如 ...

  3. Java 生成pdf表格文档

    最近在工作做一个泰国的项目,应供应商要求,需要将每天的交易生成pdf格式的报表上传到供应商的服务器,特此记录实现方法.废话不多说,直接上代码: THSarabunNew.ttf该文件是泰国字体自行网上 ...

  4. 今天介绍一个渐变的方法，在shell里面自动生成注释简介

    在编辑sh脚本时,我经常在shell中写一些注释.今天我介绍一种渐变方法,它可以在每次vim shell脚本时自动在shell中生成注释和其他信息. 让我们共享一个shell脚本模板文件,将其复制到用 ...

  5. Python3基础笔记_列表

    # Python 列表(List) list1 = ['physics', 'chemistry', 1997, 2000] list2 = [1, 2, 3, 4, 5] list3 = [&quo ...

  6. 0821NOIP模拟测试赛后总结

    60分rank20.挂.完. 赛时状态 不是很好.老眼混花看错无数题目信息. 倒不是很困.尽管昨天晚上为了某个该死的s-h-s-j活动报告忙到了今天,但我不得不说车上的睡眠还是挺好的. 照例通读三道题 ...

  7. tomcat结构图

  8. HBase Ambari

  9. CF629E Famil Door and Roads【树上计数+分类讨论】

    Online Judge:Codeforces629E,Luogu-CF629E Label:树上计数,分类讨论,换根 题目描述 给出一棵n个节点的树.有m个询问,每一个询问包含两个数a.b,我们可以 ...

  10. 01.Hibernate快速入门

    第一步:下载Hibernate5的运行环境 https://sourceforge.net/projects/hibernate/files/hibernate-orm/ 第二步:在数据库创建表 Cr ...