垂直水平居中的几种方法

1，（元素在容器中垂直水平居中）

css： .box{width:800px;height:800px;background:#ccc;display:flex;justify-content:center;align-items:center;}

.box div{width:300px;height:300px;background:red;}

html:  <div class="box">

<div></div>

</div>

2,（元素在容器中垂直水平居中）

css： .box{width:800px;height:800px;background:#ccc;display:flex;justify-content:center;}

.box div{width:300px;height:300px;background:red;align-self:center;}

html:  <div class="box">

<div></div>

</div>

3,(元素在页面垂直水平居中)

css:   .box{width:800px;height:800px;background:red;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}

html:  <div class="box"></div>

4,（元素在容器中垂直水平居中）

css:    .box{width:800px;height:800px;text-align:center;}

.box .box2{display:inline-block;vertical-align:middle;}

.box span{display:inline-block;width:0px;height:100%;vertical-align:middle;}

html:   <div class="box">

<a class="box2">垂直水平居中</a><span></span>

</div>

<!--要在元素后面不换行加空的span-->

时间： 2024-12-17 13:54:46

垂直水平居中的几种方法的相关文章

css实现垂直水平居中的5种方法

css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; border:1px solid #000; display: table-cell; text-align: center; vertical-align: middle; } #small{ display: inline-block; width: 50px; height: 50px; backgro

让一个元素垂直水平居中的三种方法

第一种方法: div.box{ weight:200px; height:400px; <!--把元素变成定位元素--> position:absolute; <!--设置元素的定位位置,距离上.左都为50%--> left:50%; top:50%; <!--设置元素的左外边距.上外边距为宽高的负1/2--> margin-left:-100px; margin-top:-200px; } *兼容性好;缺点:必须知道元素的宽高 ------------- 第二种方法:

让一个元素垂直水平居中的三种方法【转】

第一种方法: div.box{ weight:200px; height:400px; <!--把元素变成定位元素--> position:absolute; <!--设置元素的定位位置,距离上.左都为50%--> left:50%; top:50%; <!--设置元素的左外边距.上外边距为宽高的负1/2--> margin-left:-100px; margin-top:-200px; } *兼容性好;缺点:必须知道元素的宽高 ------------- 第二种方法:

关于css垂直水平居中的几种方法

第一种, 针对内联元素居中. <div class="box box1"> <span class="test">垂直居中</span> </div> <style> .box{ width: 200px; height: 200px; border:1px solid red; } .box1{ display: table-cell; vertical-align: middle; text-align

css实现垂直水平居中的几种方法

直接上代码,只需切换class就可看效果 <!DOCTYPE html> <html> <head> <title>水平垂直居中</title> <style type="text/css"> *{ margin: 0; padding: 0; } .myDiv{ width:200px; height: 200px; background: lightblue; } /*方法一*/ .divToCenter1{

未知宽度水平居中的几种方法

在某些特定的场合,在没有知道宽度的情况下却要求水平居中,前段时间在写分页的时候碰到了这个问题.当时在网上找了一些解决方法,并选了一个最合适的方法,现将当时整理的一些方法发出.下列以分页作为演示说明: 点击查看演示DEMO 方案一 利用浮动的包裹性和相对定位百分比数据值特性,传说称之为"相对浮动" .unknow_width_center1 {position:relative; left:50%; float:left;} .unknow_width_center1 li {posit

div盒子水平居垂直中的几种方法

div盒子水平居垂直中的几种方法<!DOCTYPE html><html>    <head>        <mete charset="utf-8"/>        <style>            *{                margin: 0;                padding: 0;            }            /*方案1.使用transforms属性的translate

水平居中的两种方法margin text-align

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

纯CSS完美实现垂直水平居中的6种方式

前言 由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的.网上讲居中的文章很多,但是都不太完整,所以小茄今天就来总结下纯CSS实现居中的各种方案.学疏才浅,文中如有不当之处,万望指出! 6种方案 1.绝对定位+margin:auto <style type="text/css"> .wrp { background-color: #b9b9b9; width: 240px;