主要记录自己日常积累的布局相关的东西，持续更新中。

1.登录框上下左右自适应居中

以前想要把登录表单始终放置在页面的中间，花了不少心思，一直以来用的解决方法都是用js，感觉有点麻烦不是很好，于是在网上查询了一下发现了一种比较的实现方法。

原理就是用position:absolute,然后用left：50%，top：50%，现在登录表单左侧直角是在页面的中间了，但是登录框本身还有宽度和高度，所以我们再用margin-left:-登录框宽度，margin-top：-登录框高度，就可以让登录框显示在页面的正中间了。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

	<title>登录框自适应居中</title>

	<style>

	#LoginContainer {

		position: absolute;

		width:400px;

		height:200px;

		left:50%;

		top:50%;

		margin-left:-200px;

		margin-top:-100px;

		border:1px solid #ccc;

	}

	</style>

</head>

<body>

	<div id="LoginContainer">

	这是登录框

	</div>

</body>

</html>

　　

很多问题的解决方法都不止一种，还是要多学习多交流啊。

2.左右布局，左侧固定宽度，右侧自适应宽度

原理就是左侧div固定宽度+float，然后右侧的div设置左间隔左侧div宽度的距离就可以了（margin-left:左侧div的宽度）

<style type="text/css">

    html, body { padding: 0px; margin: 0px; height: 100%; overflow: hidden; }

    .container { height: 100%; border: 1px solid #ccc; min-width: 600px; }

        .container .west { border-right: 1px solid #ccc; height: 100%; width: 200px; float: left; }

        .container .content { height: 100%; margin-left: 200px; }

</style>

<div class="container">

    <div class="west">west</div>

    <div class="content">content</div>

</div>

3.利用translate(-50%, -50%)居中(红色为关键部分)

　　position: fixed;
　　min-width: 100px;
　　color: #fff;
　　border-radius: 2px;
　　background-color: rgba(0, 0, 0, 0.6);
　　padding: 10px 5px;
　　top: 50%;
　　left: 50%;
　　transform: translate(-50%, -50%);
　　text-align: center;

css+div上下左右自适应居中的更多相关文章

  1. CSS实现DIV水平自适应居中

    DIV水平自适应居中 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=&quo ...

  2. 如何让div上下左右都居中

    在做登陆页面的话,需要login的div 上下左右都居中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

  3. css div上下左右居中

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

  4. CSS DIV中表格居中显示

    将div的text-align设为center,然后将table的margin设为auto,即: <div> <table style="margin:auto; widt ...

  5. html分页自适应居中；css设置分页自适应居中

    制作网页列表的分页必不可少,显示的列表条数也不一样,让我们一起来看看如何让分页标签根据给定的分页自动居中呢. 对<ul>标签设置样式为:{ display: table margin:40 ...

  6. margin重叠现象与margin auto自适应居中

    上下相邻的(算一种兄弟关系)普通元素,上下边距并非简单的相加,而是取其中最大的边距值:而浮动的盒子边距是相加的:父子div也会发生重叠,并不是bug: <style>#test1{ wid ...

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

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

  8. css div图片上下左右居中

    <style type="text/css"> div{border:1px solid #ccc;height:500pc;width:500px;text-alig ...

  9. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

随机推荐

  1. day 15 内置函数

    内置函数 不用def定义能直接用的函数,带括号的 locals() # 返回本地作用域中的所有名字 globals() # 返回全局作用域中的所有名字 global 变量 nonlocal 变量 迭代 ...

  2. Centos安装步骤

    下面是安装的详细步骤 1.选择自定义高级 2.下一步 3.选择稍后安装操作系统 4.选在Lunix和CentOS64位 5.修改安装的路径,自己选择 6.下面一直默认就可以了,点击下一步 7.注意注意 ...

  3. Java邮件发送工具类

    个人博客 地址:https://www.wenhaofan.com/article/20190507104851 引入Pom依赖 依赖于apchae email包,maven项目可直接加入以下依赖,普 ...

  4. HTTP协议、时间戳、防盗链的一些概念

    HTTP协议 什么是HTTP协议 (HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准. HTTP是一 ...

  5. APC BK650 RJ50-USB数据线引脚定义

    WHY 群晖NAS配套购入APC BK650-CH UPS电源,一根线实现UPS-NAS通讯. 考虑到自带的USB连接线可能损坏,记录引脚定义供DIY之需. UPS BK650采用10芯RJ-50接口 ...

  6. Anroid Studio 教程干货

    常见设置 a)在Setting中,修改主题.修改工程目录的字体大小.  b)在Setting中,显示行号:  c)设置注释模板,File–>Other Setting –> Default ...

  7. Spring Boot源码（三）：去除Tomcat

    Spring boot中使用的是内置的Tomcat,而不像Spring mvc那样依赖外部tomcat运行项目. spring boot中导入了Tomcat的jar包: 点进一个Spring boot ...

  8. 2020省选模拟训练1 排列（perm）多项式exp+EGF

    这道题真的还是简单的一批..... 我当时要是参加考试的话该多好(凭这一道题就能进前 5 了) 十分显然的指数型生成函数. 令 $f[i]$ 表示有 $i$ 个点的答案. 然后显然有 $f[i]=\s ...

  9. vs2015运行时提示未加载vcruntime140.adm64.pb

    后调试查看发现 vs2015运行时提示未加载vcruntime140.adm64.pb 解决方案:去微软官网下载安装 vc_redist.exe ,安装就可以了.有64位版和32位版,根据计算机配置进 ...

  10. jvm gc 调优 实战

    非常不错的文章们 转自: 中文:http://blog.csdn.net/dragonassassin/article/details/51010947 http://josh-persistence ...