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

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. JAVA类变量、类方法

    类变量(static) 类变量是该类的所有对象共享的变量,任何一个该类的对象去访问它时,取到的都是相同的值,同样任何一个该类的对象去修改它时,修改的也是同一个变量. public class C { ...

  2. PyQt5【入门-窗口】

    一.窗口 #设置窗口标题 setWindowTitle("标题") #设置窗口坐标和大小 setGeometry(0,0,800,600) """ 项 ...

  3. Vue自定义全局Toast和Loading

    如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast.那么我们就自定义这两个组件吧. 1.Toast组件 首先,在common下新建global文件 ...

  4. JavaWeb开发图书管理系统（新本版）源码

    开发环境: Windows操作系统开发工具: Myeclipse+Jdk+Tomcat+MySQL数据库 运行效果图

  5. vue自定义插件

    1.新建js文件 utils.js,自定义方法 let local = { say() { console.log('我是插件里面自定义的方法') } } export default { insta ...

  6. LAMP(七)之编译安装php（模块化和fpm两种方式）

    安装前说明: 安装环境: CentOS6 安装应用程序:httpd2.4 + mariadb + php 安装次序: 先编译安装 httpd2.4和mariadb,最后安装php 编译安装 httpd ...

  7. java中equals与==号的区别

    1.==号对于基本数据类型来说,比较的是值,对于引用数据类型来说比较的是地址值 2.equals方法在object类中,比较的是地址值,但是String类重写了Object类中的equals方法,所以 ...

  8. gulp常用插件之gulp-size使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-size这是一款显示项目的大小插件. 更多使用文档请点击访问gulp-size工具官网. 安装 一键安装不多解释 npm install ...

  9. 5.Docker Compose 部署 Harbor

    什么是 Harbor Harbor 是一个用于存储和分发 Docker 镜像的企业级 Registry 服务器,通过添加一些企业必需的功能特性,例如安全.标识和管理等,扩展了开源 Docker Dis ...

  10. C语言实现反转链表 II(指定2个节点反转)

    要求: 反转从位置 m 到 n 的链表.请使用一趟扫描完成反转. 说明:1 ≤ m ≤ n ≤ 链表长度. 示例: 输入: 1->2->3->4->5->NULL, m ...