CSS 盒子实现居中的几种常见方式

1、top、bottom、left、right、position、margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            position: absolute;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            width: 200px;
            height: 200px;
            margin: auto;
            background: #000;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

时间： 2025-01-16 06:47:15

CSS 盒子实现居中的几种常见方式的相关文章

ASP.NET页面间传值的几种常见方式

(新建项目WebApplication,添加新项:源页面Default.aspx和目标页面WebForm1.aspx. 在源页面Default.aspx中添加两个TextBox, ID分别为Nametb和Emailtb,两个Label;在WebForm1.aspx中添加两个Label,ID分别为lname和lemail,用于显示TextBox传过来的值.) 1.使用QueryString 使用QueryString在页面间传递值已经是一种很老的机制了,这种方法的主要优点是实现起来非常简单,然而它

事件绑定的几种常见方式

在项目开发中,经常遇到绑定事件不起作用,或者事件绑定多次,导致重复触发.为了应对所遇到的问题,上网查阅了一些资料,对事件绑定做了一些系统研究.##1.事件绑定的几种常见方式(以click事件为例) $(selector).click(function(){...}) $(selector).bind("click",function(){...}) $(selector).live("click",function(){...}) $(document).deleg

C# 实现AOP 的几种常见方式

AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的中统一处理业务逻辑的一种技术,比较常见的场景是:日志记录,错误捕获.性能监控等 AOP的本质是通过代理对象来间接执行真实对象,在代理类中往往会添加装饰一些额外的业务代码,比如如下代码: class RealA { public virtual string Pro { get; set; } public virtual void ShowHello(string

使用CSS完成元素居中的七种方法

在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至少有六种实现居中的方法.我将使用下面的HTML结构从简单到复杂开始讲解: <div class="center"> <img src="jimmy-choo-shoe.jpg" alt></div> 鞋子图片会改变,但是他们都会保持

css中元素居中的几种方法

对于在网页端布局,垂直居中难于水平居中,同时实现水平和垂直居中是最难的.在移动端,因为设备的宽高是可变的,故一些方案很难实现.以下使用几种方案对下面的html去实现居中,如有不足,可以提出宝贵的意见: <div class="center"> <img src="1.jpg" alt> </div> 1. 使用text-align水平居中这种方案只能使水平居中,要想垂直居中的话,要给div添加padding或给内容添加margi

CSS盒子坍塌问题的4种解决方案

一.问题重述嗯,这个就是坍塌的盒子了.外部盒子本应该包裹住内部的两个浮动盒子,结果却没有. 二.问题出现的原因 3个盒子都只设置了width,而没有规定height,内部两个盒子分别设置了左右浮动.布局就这么简单,但结果和我们想象的却大不一样. 问题出现的原因是内部两个盒子都有float属性,而float属性会把元素从标准文档流中抽离,直接结果就是外部盒子丢了两个孩子,因为内部没有其它盒子了,所以外部盒子只包裹了文本节点内容,却把两个内部盒子扔在外面了. 三.解决方案上面分析了问题出现的原因

CSS绝对定位元素居中的几种方法

CSS居中绝对定位元素的方法,有很多种,下面是我收集的几种 1,div宽度未知1 <body> <div style="position: absolute; left: 50%;"> <div style="position: relative; left: -50%; border: dotted red 1px;"> 没有宽度<br /> 照样居中,嘿嘿嘿 </div> </div> &l

css布局 - 垂直居中布局的一百种实现方式（更新中...）

首先将垂直居中的现象和实现方式两大方向细分类如下: 接下来逐条累加不同情况下的垂直居中实现. 目录: 一.父元素高度固定时,单行文本 | 图片的垂直居中 1. line-height行高简单粗暴实现法:line-height:Npx(N = 与元素高度相同的值) 2. vertical-middle上场: 二.父元素高度固定时,多行文本的垂直居中 1. 帮多行文本找一个继父来领养他,让继父弥补父元素给他带来的伤害(行高和水平居中对齐的样式修改) 2. margin负边距简单处理一下底部小“裂痕”

Tomcat部署项目的几种常见方式

以前学习的时候只知道在Eclipse或者MyEclipse中发布项目到Tomcat,最近实习时发现不同的项目还有不同的发布方式,所以特地学习了Tomcat发布项目的方式,在此记录下来. 1 直接将web项目文件件拷贝到webapps目录中这是最常用的方式,Tomcat的Webapps目录是Tomcat默认的应用目录,当服务器启动时,会加载所有这个目录下的应用.如果你想要修改这个默认目录,可以在conf下的server.xml文件里修改Host标签里的appBase值. 这个方法实际上和在IDE