I am trying to remove oblique border issue, best to show it in a picture:
Here is the css applied to the div:
.blog_post {background: #fff}
.blog_post .post {
border-right-color: #F1F1F1;
border-top-color: #FF0000;
}
.blog_post .post, .blog_post .sidebar {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #FFFFFF;
border-width: 10px;
}
.blog_post .post {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #9A9570;
border-color: #8F8960 #8F8960 -moz-use-text-color;
border-image: none;
border-style: solid;
border-width: 10px;
float: left;
margin: -560px 0 0 -12px;
padding: 28px 30px;
position: relative;
width: 528px;
z-index: 9;
}
Any help would be greatly appreciated.
Easy way: Another container
You can't do this with traditional HTML borders as they work at shown above (that's how CSS triangles work!). The easiest way to get this effect is to wrap the element in another container.
Demo
HTML
<div class="container">
<div class="inner-container">
...
</div>
</div>
CSS
.container {
border-top:10px solid red;
border-bottom:10px solid red;
}
.inner-container {
border-left:10px solid blue;
border-right:10px solid blue;
}
Hard way: :before and :after
This method is a little more tricky but you can manage to pull it off with only one wrapping element.
Demo
HTML
<div class="container">
...
</div>
CSS
.container {
border-top:10px solid red;
border-bottom:10px solid red;
position:relative;
/* pad out the left and right to allow room for the border */
padding:0 10px;
}
.container:before,
.container:after {
position:absolute;
top:0;
bottom:0;
width:10px;
background-color:blue;
display:block;
content:"";
}
.container:before {
left:0;
}
.container:after {
right:0;
}
You can always use inset box shadows. They are pretty easy to use, and they don't require much CSS, nor do you have to change the HTML.
Check it out. jsFiddle here
div {
box-shadow: inset 0px 10px 0px red;
border: 10px solid blue;
border-top: 0px;
}
Using pseudo-classes :before and :after
.border-fixed {
width: 300px;
height: 300px;
background: #EEE;
margin: 60px auto 0;
border: solid 10px #DDD;
border-top-color: #BBB;
position: relative;
}
.border-fixed:before,
.border-fixed:after {
content: "";
top: -10px;
left: -10px;
position: absolute;
width: 10px;
height: 10px;
background: #BBB;
}
.border-fixed:before {
right: -10px;
left: auto;
}
Related
I am attempting to align the border of the pseudo-element to evenly match the border of the button. I am using ::before and ::after pseudo-elements overlaid to get this effect, but they do not properly match the rest of the border.
I have messed around with the left and right positioning as well as the border-width of each element, but can't seem to get them to line up perfectly
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn-txt{
color: black;
}
button {
border: none;
outline: none;
padding: 0;
border-width: 0;
left: 40%;
}
button:hover {
cursor: pointer;
}
.signpost { /* our rectangle */
width:250px;
height:50px;
background-color: yellow;
margin:0px auto;
position: relative;
border-top: 2px solid red;
border-bottom: 2px solid red;
border-left: 2px solid red;
}
.signpost:after { /* our pseudo-element */
content:"";/* required */
position: absolute; /* takes the 'cap' out off flow */
top:0%; /* stick it to top edge of the sign */
left:81%; /* push it way overto the right*/
height:0; /* we're doing this with borders remember */
width:0;
border-width: 25px;
border-style:solid;
border-color: #fff; /* same as bg of our rectangle */
/* now we make some of theborders disappear*/
border-top-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
.signpost:before { /* our pseudo-element */
content:"";/* required */
position: absolute; /* takes the 'cap' out off flow */
top:0%; /* stick it to top edge of the sign */
left:80%; /* push it way overto the right*/
height:0; /* we're doing this with borders remember */
width:0;
border-width: 25px;
border-style:solid;
border-color: red; /* same as bg of our rectangle */
/* now we make some of theborders disappear*/
border-top-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
<button class="signpost">
<p class="btn-txt">HELLO</p>
</button>
Example of current issue: https://codepen.io/codingforthefuture/pen/YzKeeVJ
Here is a different idea with less of code where the alignment will be easy to handle:
.box {
display:inline-block;
position:relative;
margin:10px;
padding:10px 50px 10px 10px;
border:2px solid red;
border-right:0;
z-index:0;
background:linear-gradient(yellow,yellow) left/calc(100% - 40px) 100% no-repeat;
}
.box:before,
.box:after{
content:"";
position:absolute;
z-index:-1;
right:0;
width:40px;
top:0;
bottom:50%;
border-right:2px solid red;
background:yellow;
transform:skewX(-45deg);
transform-origin:top;
}
.box:after {
transform:skewX(45deg);
transform-origin:bottom;
top:50%;
bottom:0;
}
<div class="box"> some text </div>
<div class="box"> some long long text </div>
<div class="box"> some long <br> long text </div>
I think I came to a suitable solution. From my original attempt I made the pseudo elements complete squares and rotated them 45deg, then overlapped them. I think this resolves the issues when zooming in and out too. It also makes the edges of the flag pointed instead of squared off, which I think looks better.
#flag4 {
width: 200px;
height: 56px;
box-sizing: content-box;
padding-top: 15px;
position: relative;
background: yellow;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
margin-bottom: 20px;
}
#flag4::before,
#flag4::after {
content: "";
position: absolute;
top: 10px;
width: 0;
height: 0;
left: 87.2%;
border-right: 26px solid #fff;
border-top: 26px solid #fff;
border-bottom: 25px solid #fff;
border-left: 25px solid #fff;
transform: rotate(45deg);
}
#flag4::before{
border-right: 26px solid red;
border-top: 26px solid red;
border-bottom: 25px solid red;
border-left: 25px solid red;
left: 86.6%;
}
codepen: https://codepen.io/codingforthefuture/pen/WNezNzZ
Just getting into css and, though trying different approaches, I don't manage to design a content box with the borders I have in mind. It should look something like this:
In words: The borders should cross each other and continue for some maybe 30px, maybe we can call it overflow. Resulting in crosses at all four edges.
I have tried to design small cubic boxes each at every edge, and it kinda works. But I find it very hard to include them in my concept of responsiveness, as they don't shrink at the same rate that the actual box (lets call it <box>) does. The <box> has side margins in percent, so when the page is being scaled down, the small boxes <sbox> are in my way and preventing the margins of <box> from reaching out all the way to the frames borders.
Any ideas on how to make that one more elegant?
You can do this using the help of before and after pseudo classes.
* { box-sizing:border-box; }
.box { padding:20px; width:100px; height:100px; position:relative; border-left:2px solid #000; border-right:2px solid #000; }
.box::after { position:absolute; top:5px; left:-7px; background:#000; width:110px; height:2px; content:"";}
.box::before { position:absolute; bottom:5px; left:-7px; background:#000; width:110px; height:2px; content:"";}
<div class="box">
Content
</div>
Demo
An example without pseudo classes
.outer{
height: 1em;
margin: 0 1em 0 1em;
}
.content{
border: 1px solid #000;
border-left: none;
border-right: none;
}
.innerContent{
margin: 0 1em 0 1em;
}
.borderLeftRight{
border-left: 1px solid #000;
border-right: 1px solid #000;
}
<div class="outer borderLeftRight"></div>
<div class="content">
<div class="innerContent borderLeftRight">
Content
</div>
</div>
<div class="outer borderLeftRight"></div>
Somebody already did something similar. I think the most elegant way is with pseudo selectors :before & :after. I feel you should do it in this way and not with wrappers. Most important things are setting your element's position to relative and then before and after selectors position to absolute. Then fiddle with border and top, bottom, left, right properties.
.box {
display: inline-block;
position: relative;
padding: 2em;
}
.box:after,
.box:before {
position: absolute;
content: "";
}
.box:after {
border-top: 1px solid #f00;
border-bottom: 1px solid #f00;
left: 0;
right: 0;
top: 1em;
bottom: 1em;
}
.box:before {
border-left: 1px solid #f00;
border-right: 1px solid #f00;
left: 1em;
right: 1em;
top: 0;
bottom: 0;
}
<div class="box">
text inside
</div>
Just going to put this up here to show you can do this using a single pseudo element.
Fixed width
You will have to set the width and height for it, can get around this using calc but its support isn't amazing yet.
* {
box-sizing: border-box;
}
div {
width: 300px;
height: 200px;
border-top: 1px solid;
border-bottom: 1px solid;
margin: 100px;
position: relative;
padding: 10px 25px;
}
div:after {
content: "";
display: block;
position: absolute;
top: -20px;
left: 20px;
width: 260px;
height: 240px;
border-left: 1px solid;
border-right: 1px solid;
}
<div>Testing</div>
Auto width
Example using calc, this will work with any size of text.
* {
box-sizing: border-box;
}
div {
width: 300px;
height: 200px;
border-top: 1px solid;
border-bottom: 1px solid;
margin: 100px;
position: relative;
padding: 10px 25px;
}
div:after {
content: "";
display: block;
position: absolute;
top: -20px;
left: 20px;
width: calc(100% - 40px);
height: calc(100% + 40px);
border-left: 1px solid;
border-right: 1px solid;
}
<div>Hello</div>
So I've found this answer - CSS3 menu shape, style but have no idea on how to put it on the left side. I've searched for it already but with no luck.
This is what I'm trying to achieve:
And I've found this one also - Change the shape of the triangle. How can I make it work on the opposite side? I mean the arrow needs to be on the left side. And is it possible to do this with one div?
Want one that you can put over any background color?
jsBin demo
Only this HTML:
<span class="pricetag"></span>
And this CSS:
.pricetag{
white-space:nowrap;
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:25px;
border-radius: 0 5px 5px 0;
padding: 0 25px 0 15px;
background:#E8EDF0;
border: 0 solid #C7D2D4;
border-top-width:1px;
border-bottom-width:1px;
color:#999;
line-height:23px;
}
.pricetag:after{
position:absolute;
right:0;
margin:1px 7px;
font-weight:bold;
font-size:19px;
content:"\00D7";
}
.pricetag:before{
position:absolute;
content:"\25CF";
color:white;
text-shadow: 0 0 1px #333;
font-size:11px;
line-height:0px;
text-indent:12px;
left:-15px;
width: 1px;
height:0px;
border-right:14px solid #E8EDF0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
}
which basically follows this principles: How to create a ribbon shape in CSS
If you want to add borders all around:
jsBin demo with transform: rotate(45deg) applied to the :before pseudo
.pricetag{
white-space:nowrap;
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:25px;
border-radius: 0 5px 5px 0;
padding: 0 25px 0 15px;
background:#E8EDF0;
border: 1px solid #C7D2D4;
color:#999;
line-height:23px;
}
.pricetag:after{
position:absolute;
right:0;
margin:1px 7px;
font-weight:bold;
font-size:19px;
content:"\00D7";
}
.pricetag:before{
position:absolute;
background:#E8EDF0;
content:"\25CF";
color:white;
text-shadow: 0 0 1px #aaa;
font-size:12px;
line-height:13px;
text-indent:6px;
top:3px;
left:-10px;
width: 18px;
height: 18px;
transform: rotate(45deg);
border-left:1px solid #C7D2D4;
border-bottom:1px solid #C7D2D4;
}
Since the example image in the question has extra outer borders, achieving it with the border trick will involve multiple (pseudo) elements and will become complex (because in addition to the arrow shape, a circle is also needed in front). Instead, the same could be achieved by using transform: rotate() like in the below sample.
The approach is pretty simple and as follows:
The parent div container houses the text that should be present within the price-tag shape.
The :after pseudo-element has transform: rotate(45deg) and produces the triangle shape. This is then positioned absolutely with respect to the left edge of the parent. The background set on the pseudo-element prevents the left border of the parent container from being visible.
The :before pseudo-element forms the circle present on the left side (using border-radius).
The X mark at the end is added using a span tag and the × entity.
The parent div container's width is set to auto so that it can expand based on the length of the text.
Note: This sample uses transforms, so will require polyfills in lower versions of IE.
div {
position: relative;
display: inline-block;
width: auto;
height: 20px;
margin: 20px;
padding-left: 15px;
background: #E8EDF2;
color: #888DA3;
line-height: 20px;
border-radius: 4px;
border: 1px solid #C7D2DB;
}
div:after,
div:before {
position: absolute;
content: '';
border: 1px solid #C7D2DB;
}
div:after { /* the arrow on left side positioned using left property */
height: 14px;
width: 14px;
transform: rotate(45deg);
background: #E8EDF2;
border-color: transparent transparent #C7D2DB #C7D2DB;
left: -6px;
top: 2px;
}
div:before { /* the circle on the left */
height: 4px;
width: 4px;
border-radius: 50%;
background-color: white;
left: 0px;
top: 7px;
z-index: 2;
}
.right { /* the x mark at the right */
text-align: right;
margin: 0px 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Home<span class='right'>×</span>
</div>
<div>Home Sweet Home<span class='right'>×</span>
</div>
<div>Hi<span class='right'>×</span>
</div>
Fiddle Demo
I wanted a simplified version of what was proposed here (without the hole effect and borders) but with the pointing side of it with rounded corner as well. So I came up with this solution. Visually this is what you get:
The HTML for it:
<div class="price-tag">Marketing</div>
<div class="price-tag">Sales</div>
<div class="price-tag">Inbound</div>
And the CSS for it:
.price-tag {
background: #058;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 0.875rem;
height: 30px;
line-height: 30px;
margin-right: 1rem;
padding: 0 0.666rem;
position: relative;
text-align: center;
}
.price-tag:after {
background: inherit;
border-radius: 4px;
display: block;
content: "";
height: 22px;
position: absolute;
right: -8px;
top: 4px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
width: 22px;
z-index: -1;
}
.price-tag:hover {
background: #07b;
}
original example
Modified: http://jsbin.com/ruxusobe/1/
Basically, it needs to float left, use border-right (instead of left) and modify the padding.
CSS:
.guideList{
font-size: 12px;
line-height: 12px;
font-weight: bold;
list-style-type: none;
margin-top: 10px;
width: 125px;
}
.guideList li{
padding: 5px 5px 5px 0px;
}
.guideList .active{
background-color: #0390d1;
color: white;
}
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: left;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-right: 11px solid transparent;
border-bottom: 11px solid white;
}
HTML:
<ul class="guideList">
<li><a>Consulting</a></li>
<li class="active"><span class="activePointer"></span>Law</li>
<li><a>Finance</a></li>
<li><a>Technology</a></li>
</ul>
Here is a simple example...
Orignal Version
Edited Version
CSS:
div {
margin-left: 15px;
background: #76a7dc;
border: 1px solid #CAD5E0;
padding: 4px;
width:50px;
position: relative;
}
div:after {
content:'';
display: block;
position: absolute;
top: 2px;
left: -1.3em;
width: 0;
height: 0;
border-color: transparent #76a7dc transparent transparent;
border-style: solid;
border-width: 10px;
}
Notice on border-color, only right is set with a color and everything else is set to transparent.
using pseudo element and a little bit playing with border you can achieve the exact thing. Check the DEMO.
HTML code is :
<a class="arrow" href="#">Continue Reading</a>
CSS Code is:
body{padding:15px;}
.arrow {
background: #8ec63f;
color: #fff;
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 12px;
position: relative;
border-radius: 4px;
border: 1px solid #8ec63f;
}
.arrow:before {
content: "";
height: 0;
position: absolute;
width: 0;
}
.arrow:before {
border-bottom: 15px solid transparent;
border-right: 15px solid #8ec63f;
border-top: 15px solid transparent;
left: -15px;
}
.arrow:hover {
background: #f7941d;
color: #fff;
border-radius: 4px;
border: 1px solid #f7941d;
}
.arrow:hover:before {
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;;
border-right: 15px solid #f7941d;
}
I have a css class for centering a heading, and adding vertically centered lines on either side. Problem is, it uses css3 background properties, and not every browser supports those. So I'd like to simplify this for cross browser compatibility, but am not sure how to do that.
Is there a simpler way to achieve this, without the css3 background (and without adding any extra elements or static heights/widths)?
demo here
.section-heading {
display: table;
white-space: nowrap;
}
.section-heading:before {
background: linear-gradient(to bottom, black, black) no-repeat left center / 95% 1px;
content: "";
display: table-cell;
width: 50%;
}
.section-heading:after {
background: linear-gradient(to bottom, black, black) no-repeat right center / 95% 1px;
content: "";
display: table-cell;
width: 50%;
}
<h2 class="section-heading">Example</h2>
You can use fieldset and legend, it's not very beautiful code but you don't need CSS3
http://jsfiddle.net/dASCv/9/
fieldset {
text-align: center;
border: none;
border-top: 1px solid black;
}
legend {
padding: 20px;
}
<fieldset>
<legend>
<h2>Example</h2>
</legend>
</fieldset>
OR this other method whit :after and :before
http://jsfiddle.net/dASCv/10/
div {
text-align: center;
}
h2:before,
h2:after {
border-top: 1px solid black;
display: block;
height: 1px;
content: " ";
width: 40%;
position: absolute;
left: 0;
top: 1.4em;
}
h2:after {
right: 0;
left: auto;
}
<div>
<h2>text TEXT</h2>
</div>
There is my best try.
I have a little isue that I have corrected in Chrome; but I really don't know even why it works.
The CCS is
.test {
display: table-row;
white-space: nowrap;
line-height: 0px;
}
.test:before,
.test:after {
border-color: transparent;
border-top: solid black 1px;
border-left: solid transparent 1px;
border-bottom: solid rgba(0,0,0,0.01) 11px;
border-right: solid transparent 1px;
content: "";
display: table-cell;
width: 50%;
}
.test:before {
border-right: solid 30px transparent;
}
.test:after {
border-left: solid 30px transparent;
}
I am using the border to display the black line, and to have it positioned in place I have reduced the height of the table to 0.
fiddle
In the fiddle, I have kept your original demo, so that you can compare side by side.
And now, the weird part. change rgba(0,0,0,0.01) in the border bottom to rgba(0,0,0,0.001), and it will break (at least in Chrome).
I really would like to understand that ...
new answer
All the above was asuming that the requirement was to have a transparent style (that is , that it was posible to set a background that could be seen thru the h1. If this is not the case, there is another posible solution, using box-shadow instead of gradient barckground:
.test {
display: table-row;
white-space: nowrap;
}
.test:before,
.test:after {
border: solid white 10px;
content: "";
display: table-cell;
width: 50%;
height: 10px;
line-height: 10px;
box-shadow: inset 0px 5px white, inset 0px 6px black;
}
.test:before {
border-right-width: 10px;
border-left-width: 1px;
}
.test:after {
border-left-width: 10px;
border-right-width: 1px;
}
new demo
1-element solution
FIDDLE
div {
display: inline-block;
background: #fff;
padding: 0 10px;
}
div:before {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
height: 20px;
border-bottom: 1px solid #c2c2c2;
margin-top: -9px;
z-index: -1;
}
<div>A header</div>
(NB: for this solution to work, you need to set text-align:center on its parent element)
2-element solution (works over a background image)
FIDDLE
.splitHR {
text-align: center;
overflow: hidden;
}
.splitHRText {
display: inline-block;
position: relative;
padding: 0 10px;
}
.splitHRText:before,
.splitHRText:after {
content: '';
display: block;
width: 1000px;
position: absolute;
top: 0.73em;
border-top: 1px solid #c2c2c2;
}
.splitHRText:before {
right: 100%;
}
.splitHRText:after {
left: 100%;
}
<div class="splitHR">
<span class="splitHRText">A header</span>
</div>
Please add Prefix for the CSS
For Webkit browswers
-webkit-gradient
Firefox
-moz-linear-gradient
IE
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
More Details Here http://webdesignerwall.com/tutorials/cross-browser-css-gradient
Using this way also you can achieve the answer, please check this
<p style="display:block; width:100%; text-align:center;
border-bottom:1px #ccc solid; line-height:3px">
<span style="background-color:red; ">Examples</span></p>
http://jsfiddle.net/dASCv/11/
css
h2 {
border-bottom: 1px solid black;
text-align: center;
margin: 0;
padding: 0;
}
h2 span {
display: inline-block;
position: relative;
padding: 0 20px;
bottom: -15px;
background-color: white;
}
markup
<h2><span>text Textsssssssssssssssss</span></h2>
You could set the bottom for span in percentage if you set the height for h2.
you can use this code:
JsFiddle DEMO
HTML:
<h2><span>Title is here</span></h2>
CSS:
h2{
display:block;
text-align:center;
line-height:30px;
}
h2 span{
background:#fff;
padding:0 10px;
}
h2:after{
content:"";
display:block;
border-top:1px solid black;
margin-top:-15px;
}
Update:
you can use this code too: (single element)
JsFiddle
HTML:
<h2>Title is here</h2>
CSS:
h2{
display: table;
margin: 0 auto;
text-align: center;
line-height: 30px;
padding: 0 10px;
background: #FFF;
}
h2:after{
content:"";
display:block;
border-top:1px solid;
margin-top:-15px;
position:absolute;
width:100%;
left:0;
z-index:-1;
}
I'm trying to center an anchor tag which is displayed as a CSS3 shape (a large "play"-arrow) in a div.
My markup is as follows:
<div class="element halfcol">
<div class="inner beige-bg fullheight">
<div class="element-content">
</div>
</div>
</div>
And the CSS is:
.element {
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.element .inner {
border: 2px solid #94111e;
min-height: 50px;
border-radius: 10px;
background-color: #fcf9e3;
height: inherit;
-moz-box-shadow: 2px 2px 6px #646464;
-webkit-box-shadow: 2px 2px 6px #646464;
box-shadow: 2px 2px 6px #646464;
}
.element .inner .element-content {
padding: 10px 15px;
height: inherit;
}
.element .inner .no-padding {
padding: 0px;
}
.element .beige-bg {
background-color: #fcf9e3;
}
.element .red-bg {
background-color: #94111e;
}
.element .transparent-bg {
background-color: transparent;
}
.element .white-bg {
background-color: #ffffff;
}
.element .smallheight,
.element .doubleheight,
.element .fullheight {
overflow-y: hidden;
}
.element .smallheight {
height: 90px;
}
.element .doubleheight {
height: 220px;
}
.element .doubleheight .element-content {
position: relative;
}
.element .fullheight {
height: 350px;
}
.element .no-padding {
padding: 0px !important;
}
/**** Shapes ****/
.play-button {
display: block;
margin: 0 auto;
border-left: 100px solid #94111e;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}
Which gives me this:
What I'm looking for is this:
I could just give it a margin top/left to center it, but the .element container is of variable height and width.
Anyone know how to achieve this? :-)
Thanks in advance!
You need to make the .element-content be position:relative and then
add
position:absolute;
top:50%;
left:50%;
margin-top:-60px;
margin-left:-50px;
to the .play-button
Demo at http://jsfiddle.net/jKs6F/
I changed your .play-button class as follows:
.play-button {
display: block;
margin: 0 auto;
border-left: 100px solid #94111e;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
margin-left: -50px; /* half border-left value */
margin-top: -60px; /* border-top value */
position: relative; left: 50%; top: 50%;
}
See demo