<!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. idea创建web项目，springboot项目，maven项目

    web项目搭建 https://www.cnblogs.com/jxldjsn/p/8203859.html

  2. 2019个人计划与Flag与期望

    突然发现写博客是真的好. 希望未来能在其他地方写上日记. 总结2018中的个人缺陷: 1.忘掉了学习方法或者说学习方法不正确 2.偶尔就会去偷下懒,对自己不够严格,自控能力差. 3.心态虽比以前好很多 ...

  3. 四. （TDZ）展示性死区

    在ES6中怎么使用 var Let const ? 1.var 声明之前 2. let 声明之前 3. const声明之前

  4. 关于将ECharts引入到项目中的几种方式

    方式一.在webpack中使用ECharts 1.npm安装ECharts npm install echarts --save 2.引入ECharts 通过 npm 上安装的 ECharts 和 z ...

  5. Spring boot配置Dubbo三种方式

    方式一 使用注解的方式 导入dubbo-starter 在application.properties配置属性 使用@Service暴露服务 使用@Reference引用服务 使用@EnableDub ...

  6. 我王某的 低错&&（女装）Flag

    日月共鉴,人心同睹. 喜欢你. 喜欢你的眼睛. 春天银河般闪烁的双瞳.春日阳光般温柔的眼神. 喜欢你的头发. 在微风中飘拂丝绢般柔滑的长发. 喜欢你的嘴唇. 给我甜蜜的吻.吐出忧伤叹息的嘴唇. 喜欢你 ...

  7. 用python获取ip信息

    1.138网站 http://user.ip138.com/ip/首次注册后赠送1000次请求,API接口请求格式如下,必须要有token值 import httplib2 from urllib.p ...

  8. window查看端口信息

    netstat -nao |findstr "2129" 列出所有端口的情况 tasklist|findstr "pid" 查看对应进程信息

  9. CentOS6安装docker、docker-compose、docker-enter

    一.安装docker 1.查看CentOS内核版本 uname -r 2.安装Fedora的EPEL源 yum install http://ftp.riken.jp/Linux/fedora/epe ...

  10. wps中，怎么快速查看xls中隐藏的图片

    步骤: 页面布局->选择窗格 即可在右方看到"文档中的对象“