I am creating an About page for my website. I have one parent element called maindiv, a flexbox with two children, one is leftcont and another is rightcont. I want to create an animation using margin-top to leftcont.
But when I do the same, the animation is being applied to its sibling(rightcont) div also which I do not want
Can you please help me with the same
Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.imganim {
margin-bottom: 10px;
border: 2px solid red;
transition: 2s;
}
.maindiv {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.leftcont {
width: 50%;
border: 2px solid red;
}
.rightcont {
width: 50%;
animation: none;
border: 2px solid black;
margin-top: 0 !important;
}
.marginanim {
animation: margin 2.4s infinite;
}
#keyframes margin {
0% {
margin-top: 0;
}
50% {
margin-top: 10px;
}
100% {
margin-top: 0;
}
}
</style>
</head>
<body>
<div class="maindiv">
<div class="leftcont marginanim">
<img
src="https://solutionfest.netlify.app/static/media/vector8.5596c5d75a5f1c4454c0.jpg"
alt=""
/>
</div>
<div class="rightcont">
<h2>Aboutme</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi,
obcaecati similique? Eligendi sint, laborum aspernatur, temporibus
consequuntur ipsa officiis, praesentium distinctio necessitatibus sed
debitis eius facilis molestiae. Consectetur laboriosam veritatis quis
perspiciatis ab quae sunt nam itaque veniam mollitia obcaecati non
minima molestias illo cum, ducimus soluta modi inventore consequuntur.
</p>
</div>
</div>
</body>
</html>
margin-top also changes the size of the parent, and this also affects the rightcont. If you use transform: translateY property the parent does not notice the movement and you get the effect you are looking for.
* {
margin: 0;
padding: 0;
}
.imganim {
margin-bottom: 10px;
border: 2px solid red;
transition: 2s;
}
.maindiv {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.leftcont {
width: 50%;
border: 2px solid red;
z-index:0;
}
.rightcont {
width: 50%;
animation: none;
border: 2px solid black;
margin-top: 0 !important;
z-index:1;
}
.marginanim {
animation: margin 2.4s infinite;
}
#keyframes margin {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0px);
}
}
<div class="maindiv">
<div class="leftcont marginanim">
<img src="https://solutionfest.netlify.app/static/media/vector8.5596c5d75a5f1c4454c0.jpg" alt="">
</div>
<div class="rightcont">
<h2>Aboutme</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, obcaecati similique? Eligendi sint, laborum aspernatur, temporibus consequuntur ipsa officiis, praesentium distinctio necessitatibus sed debitis eius facilis molestiae. Consectetur laboriosam
veritatis quis perspiciatis ab quae sunt nam itaque veniam mollitia obcaecati non minima molestias illo cum, ducimus soluta modi inventore consequuntur.
</p>
</div>
</div>
Related
My situation is that I don't want it as a background-image because I'm changing the opacity on hover, and so that it didn't affect the text as well I made them separate elements.
However, moving them using position: relative; means that I am left with blank space where their supposed to be in page flow.
Any help would be greatly appreciated.
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
width: 100%;
}
div {
width: 24%;
min-width: 400px;
height: 25em;
transition: 200ms;
margin: 1rem 0;
}
div.background-img {
width: 100%;
height: 100%;
}
#img-1 {
background-image: url("imgs/tokyo.jpg");
}
/* Later in code */
.background-img:hover {
transition: 200ms;
filter: brightness(50%);
outline: 1px white solid;
outline-offset: -20px;
border-radius: 5%;
}
div .hidden-text {
transition: 200ms;
position: relative;
bottom: 100%;
color: white;
opacity: 0;
pointer-events: none;
}
div:hover .hidden-text {
transition: 200ms;
color: rgb(255, 255, 255, 1);
opacity: 1;
}
<section class="flex-container">
<div>
<h1>Holiday Destinations</h1>
<span>This is a collection of locations that I either would love to visit, or loved visiting.</span>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat totam
eum asperiores assumenda, amet rem molestiae pariatur at nulla sequi
debitis itaque voluptatem modi corrupti fugiat sed quod dolores
perspiciatis maiores in! Tenetur molestiae eum cupiditate obcaecati
consectetur. Culpa consequatur doloribus, non voluptates quia commodi
dolore mollitia cupiditate modi dolorem?
</p>
</div>
<div>
<div class="background-img" id="img-1"></div>
<h2 class="hidden-text">Tokyo - Japan</h2>
<p class="hidden-text">Lorem ipsum dolor sit amet.</p>
</div>
</section>
Website here --> https://dex-hewitt.github.io/holiday-destinations
Thank you!
Also please let me know if I've written question poorly or not included any necessary parts I am new to stackoverflow.
You can approach it this way if you don't want it to be as a background. Let me know
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
width: 100%;
}
div {
width: 24%;
min-width: 400px;
height: 25em;
transition: 200ms;
margin: 1rem 0;
}
div.background-img {
width: 100%;
height: 100%;
}
div img {
width: 500px;
height: 500px;
object-fit: cover;
}
/* Later in code */
.background-img:hover {
transition: 200ms;
filter: brightness(50%);
outline: 1px white solid;
outline-offset: -20px;
border-radius: 5%;
}
div .hidden-text {
transition: 200ms;
position: relative;
bottom: 100%;
color: white;
opacity: 0;
pointer-events: none;
text-align: center;
}
div:hover .hidden-text {
transition: 200ms;
color: rgb(255, 255, 255, 1);
opacity: 1;
}
<section class="flex-container">
<div>
<h1>Holiday Destinations</h1>
<span>This is a collection of locations that I either would love to visit, or loved visiting.</span>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat totam
eum asperiores assumenda, amet rem molestiae pariatur at nulla sequi
debitis itaque voluptatem modi corrupti fugiat sed quod dolores
perspiciatis maiores in! Tenetur molestiae eum cupiditate obcaecati
consectetur. Culpa consequatur doloribus, non voluptates quia commodi
dolore mollitia cupiditate modi dolorem?
</p>
</div>
<div>
<img class="background-img" src="https://thumbs.dreamstime.com/b/shinjuku-gyoen-national-garden-tokyo-japan-large-park-shibuya-lake-asian-153188061.jpg" >
<h2 class="hidden-text">Tokyo - Japan</h2>
<p class="hidden-text">Lorem ipsum dolor sit amet.</p>
</div>
</section>
Sorry all, a typo mistake on my end. While I thought it was the texts border box causing the blank space, I found it to be a missing "/" symbol on a lower div.
#keyframes mgm {
from {
max-height: 250px;
}
to {
max-height: 0px;
}
}
.mgm {
width: 180px;
border: 1px solid black;
padding: 10px;
animation: mgm 1s ease-in-out;
max-height: 250px;
overflow:hidden;
}
<div class="mgm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae,
blanditiis qui porro possimus commodi laudantium voluptatum accusantium.
Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur
asperiores fugiat ducimus!
</div>
By running above code, height of the content is decreasing from bottom only and animation stops at the top. But I want to decrease the height from both bottom and top equally i.e; animation should stop at the centre of the content.
How to achieve this ?
Alternate approach -
Yes we can do this by using scaleY CSS property but it shrinks the internal content. As given below -
#keyframes mgm {
from {
transform:scaleY(1);
}
to {
transform:scaleY(0);
}
}
.mgm {
width: 180px;
border: 1px solid black;
padding: 10px;
animation: mgm 1s ease-in-out;
max-height: 250px;
overflow:hidden;
}
<div class="mgm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae,
blanditiis qui porro possimus commodi laudantium voluptatum accusantium.
Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur
asperiores fugiat ducimus!
</div>
#dommmm's Answer is also correct. In case if you don't want to play with positioning you can achieve it with flex as well. This also has same approach of wrapping the animated div in a container.
Here the height is fixed to 250px (same as the max height of the animated div) to avoid page scrolling. And then the animated div is positioned to center.
I've also reduced padding top and bottom from 10px to 0px to achieve the div closing completely.
.animation-container {
display: flex;
align-items: center;
height: 250px;
}
#keyframes mgm {
from {
max-height: 250px;
padding: 10px 10px;
}
to {
max-height: 0px;
padding: 0px 10px;
}
}
.animation-container {
display: flex;
align-items: center;
height: 250px;
}
.mgm {
width: 180px;
border: 1px solid black;
padding: 10px;
animation: mgm 1s ease-in-out alternate infinite;
max-height: 250px;
overflow: hidden;
display: flex;
align-items: center;
}
<div class="animation-container">
<div class="mgm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, blanditiis qui porro possimus commodi laudantium voluptatum accusantium. Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur asperiores fugiat ducimus!
</div>
</div>
Another idea using clip-path where you don't need to deal with height
#keyframes mgm {
to {
clip-path: inset(50% 0);
}
}
.mgm {
width: 180px;
border: 1px solid black;
padding: 10px;
animation: mgm 1s ease-in-out infinite alternate;
clip-path: inset(0 0);
}
<div class="mgm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, blanditiis qui porro possimus commodi laudantium voluptatum accusantium. Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur asperiores fugiat ducimus!
</div>
To get the border effect, you can consider a pseudo element like below:
.mgm {
width: 180px;
padding: 10px;
animation: mgm 1s linear infinite alternate;
clip-path: inset(0 0);
position: relative;
}
#keyframes mgm {
to {
clip-path: inset(50% 0);
}
}
.mgm:before {
content: "";
position: absolute;
border: 1px solid black;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 1px 0;
animation: inherit;
animation-name: mgm-b;
}
#keyframes mgm-b {
to {
margin: 50% 0;
}
}
<div class="mgm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, blanditiis qui porro possimus commodi laudantium voluptatum accusantium. Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur asperiores fugiat ducimus!
</div>
The pseudo element can be enough if you don't want transparency:
.mgm {
width: 180px;
padding: 10px;
position: relative;
overflow:hidden;
}
.mgm:before {
content: "";
position: absolute;
border: 1px solid black;
box-shadow:0 0 0 200vmax #fff;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 1px 0;
animation: mgm 1s linear infinite alternate;
}
#keyframes mgm {
to {
margin: 50% 0;
}
}
<div class="mgm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, blanditiis qui porro possimus commodi laudantium voluptatum accusantium. Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur asperiores fugiat ducimus!
</div>
To achieve this effect you will need to place the text in a child container and position it absolutely. Shrinking the parent div in this manner will not shrink the internal content.
#keyframes mgm {
from {
transform: translateY(0%);
height: 150px; /* original container height */
}
to {
transform: translateY(75px); /* 50% of original container height */
height: 0px;
}
}
.mgm {
width: 50%;
border: 1px solid black;
animation: mgm 1s ease-in-out;
height: 150px;
overflow: hidden;
position: relative;
}
.mgm p {
position: absolute;
margin: 10px;
top: 50%;
transform: translateY(-50%);
max-height: 150px;
max-width: 100%;
}
<div class="mgm">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae,
blanditiis qui porro possimus commodi laudantium voluptatum accusantium.
Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur
asperiores fugiat ducimus!
</p>
</div>
I have some problem with creating inside border of image. Tried to do it with border, outline and box-shadow but didn't get the result.
HTML:
<div class="item">
<img src="https://i.ytimg.com/vi/vsZDSXlHqI4/maxresdefault.jpg" alt="">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo blanditiis, distinctio. Odio eveniet vel nobis, consequuntur atque, dolorum debitis quae nesciunt esse quasi beatae, odit repudiandae dolore animi delectus ad nostrum, quas maiores hic labore?
Nisi, expedita sint, qui ullam itaque natus optio error accusantium placeat, culpa reiciendis, quos tempora.</p>
<button>Some action</button>
</div>
CSS:
div.item:hover {
//some code
img {
border-bottom: 5px solid #8cc34b;
margin-bottom: -5px;
}
}
My fiddle: JSFiddle
Here I got the outside border but I want to get inside border of image.
Thanks for help.
Wrap your img in div, and on hover use :after pseudo-element:
div.item {
min-height: 300px;
overflow: auto;
width: 300px;
background-color: white;
border: 2px solid #8cc34b;
border-radius: 5px;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.item img {
width: 100%;
display: block;
}
div.item p {
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
div.item button {
height: 35px;
width: 120px;
margin: 0 auto;
margin-bottom: 20px;
}
div.item .img-container {
position: relative;
}
div.item:hover h3 {
color: #8cc34b;
}
div.item:hover .img-container:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 5px;
width: 100%;
background-color: #8cc34b;
}
<div class="item">
<div class="img-container">
<img src="https://i.ytimg.com/vi/vsZDSXlHqI4/maxresdefault.jpg" alt="">
</div>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo blanditiis, distinctio. Odio eveniet vel nobis, consequuntur atque, dolorum debitis quae nesciunt esse quasi beatae, odit repudiandae dolore animi delectus ad nostrum, quas maiores hic labore?
Nisi, expedita sint, qui ullam itaque natus optio error accusantium placeat, culpa reiciendis, quos tempora.</p>
<button>Some action</button>
</div>
I also added display: block on img, because inline img creates extra whitespace below.
Another answer:
To create a color bar like in the image you liked to, I wrapped your image in a DIV with class x and added the following CSS (including a pseudo element):
img {
width: 100%;
}
.x {
display: block;
position: relative;
}
.x:before {
content: '';
position: absolute;
z-index: -1;
bottom: 7px;
left: 0;
right: 0;
height: 5px;
background-color: #8cc34b;
}
Instead of a hover rule for the image, I just make the x DIV visible by changing its z-index:
div.item:hover {
h3 {
color: #8cc34b;
}
.x:before {
z-index: 1;
}
}
Adjust the bottom setting as desired to move it up or down:
https://jsfiddle.net/9wLx9p0f/5/
We can simply do this with outline-offset property:
outline: 1px solid #fff;
outline-offset: -10px;
Try this in the div you wants, if it works for you.
The .speech height may vary therefore looking for solution to make .speech::after's width same as .speech's height.
ideal result
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.speech {
width: 250px;
padding: 1rem;
background-color: tomato;
color: white;
border: 1px solid;
position: relative;
}
.speech::after {
content: '';
position: absolute;
top: 0;
left: 100%;
border: 3px solid deepskyblue;
height: 100%;
padding-left: 50%;
background: linear-gradient(45deg, transparent 50%, green 0%);
transform: translateX(-50%) rotate(45deg);
}
<div class="speech">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem.</div>
You don't necessarily need pseudo elements for this, as long as you use CSS gradients, since all browsers that support gradients also support multiple backgrounds:
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.speech {
width: 250px;
padding: 1rem;
background: linear-gradient(tomato,tomato),
linear-gradient(to top right, tomato 49%,transparent 51%),
linear-gradient(to bottom right, tomato 49%,transparent 51%);
background-size: calc(100% - 30px) 100%, 30px 50%, 30px 50%;
background-position: 0 0, 100% 0, 100% 100%;
background-repeat: no-repeat;
color: white;
border: 1px solid;
position: relative;
}
<div class="speech">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem.</div>
Defining a clip-path will give you the intended result.
The clip-path CSS property creates a clipping region that defines what
part of an element should be displayed. Those portions that are inside
the region are shown, while those outside are hidden. The clipping
region is a path specified either as a URL referencing inline or
external SVG, or as a shape, such as a circle().
clip-path - CSS | MDN
var addText = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem.";
jQuery('.add-text').on('click', function(){
jQuery('.alt-speech').append(addText);
});
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; /* for the sake of demonstration */
}
.speech {
width: 250px;
padding: 1rem;
background-color: tomato;
color: white;
border: 1px solid;
position: relative;
}
.speech::after {
content: '';
position: absolute;
top: 0;
left: 100%;
border: 3px solid deepskyblue;
height: 100%;
padding-left: 50%;
background: linear-gradient(45deg, transparent 50%, green 0%);
transform: translateX(-50%) rotate(45deg);
}
/* Additional */
.alt-speech {
width: 250px;
padding: 1rem;
background-color: tomato;
color: white;
border: 1px solid;
position: relative;
}
.alt-speech:after {
content: "";
width: 50%;
background: tomato;
-webkit-clip-path: polygon(0 0, 0% 100%, 30% 50%);
clip-path: polygon(0 0, 0% 100%, 30% 50%);
top: 0;
bottom: 0;
left: 100%;
position: absolute;
}
.add-text {
transition: .7s;
color: white;
background: tomato;
padding: 10px 20px;
cursor: pointer;
}
.add-text:hover {
background: #c12a0f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-text">Add Text</div>
<div style="margin: 20px 0px"></div>
<div class="alt-speech">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem.</div>
Further Reading:
Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box (Smashing Magazine)
NOTE:
This is an experimental technology, carefully review cross browser compatibility and support before implementing in production.
Cross browser compatibility & support Overview:
caniuse.com
clip-path - CSS | MDN
This is not what you actually asked for. So please correct me if I'am wrong. You asked for a bubble that grows width the height of the parent container. This is not the case with this answer. But I feel this is the desired effect anyways.
Instead of rotating an element by 45% this is using two pseudo elements and linear backgrounds to have a bubble effect.
The width is fixed and may be set according to your needs. But the bubble itself follows the height of any dynamic content.
.speech {
width: 250px;
padding: 1rem;
background-color: tomato;
color: white;
border: 1px solid;
position: relative;
}
.speech::before,
.speech::after {
content: '';
position: absolute;
left: 100%;
right: 0;
top: 0;
width: 45px;
height: 50%;
}
.speech::before {
background: linear-gradient(to top right, tomato 50%, transparent 50%);
}
.speech::after {
top: 50%;
background: linear-gradient(to bottom right, tomato 50%, transparent 50%);
}
<div class="speech">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem.</div>
<div class="speech">Very small</div>
<div class="speech">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem.</p>
</div>
Update your code like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width;" />
<meta name="format-detection" content="telephone=no">
<meta name="description" content="">
<link rel="shortcut icon" href="favicon.ico" />
<meta name="author" content="">
<style>
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.speech {
width: 250px;
padding: 0px;
background-color: tomato;
color: white;
border: 1px solid;
position: relative;
}
.speech::after {
content: '';
position: absolute;
width: 0;
height: 0;
top:0px;
left:100%;
}
</style>
</head>
<body>
<div class="speech">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem.</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$( document ).ready(function() {
var ht = $(".speech").height();
var ht1 = ht/2;
$("head").append($('<style>.speech:after { border-top: '+ht1+'px solid transparent; border-bottom: '+ht1+'px solid transparent; border-left: '+ht1+'px solid green;}</style>'));
});
</script>
</body>
</html>
When I resize browsers window, my div gets down to bottom and a big space comes in top. I want that my div should remain in center of page even if resize the size of window lesser than size of div. In my school they haven't teach about this but I want to align this div in center of page
<!DOCTYPE html>
<html>
<head>
<title>CSS centering Done Right.</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body, .m {
height: 100%;
width: 100%;
}
.m {
opacity:1;
font-size: 0;
overflow: auto;
text-align: center;
/*styling>>*/
background-color: #8F1C10;
}
.m::before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.m>div {
display: inline-block;
font-size: 19px;
margin: 20px;
max-width: 320px;
min-height: 20px;
min-width: 300px;
padding: 14px;
vertical-align: middle;
/*styling*/
color:white;
background-color: #140A08;
outline:none;
}
</style>
</head>
<body>
<title>CSS centering Done Right.</title>
<div class="m">
<div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, enim, possimus, voluptates, quia voluptatibus voluptas eum quaerat iure aperiam asperiores debitis fuga itaque quibusdam a ad odio assumenda iusto voluptatem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, ex quia consequatur quae quasi amet veniam est quas error quos perferendis ducimus non similique in soluta magnam dolore molestias veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, doloremque iste magni in eveniet ipsa odio mollitia eligendi magnam placeat aliquam hic reprehenderit reiciendis itaque assumenda ratione delectus. Alias, quis.</div>
</div>
</body>
</html>
margin: auto; is what you need. Try this:
<style>
* {
margin: 0;
padding: 0;
}
/*html, body, .m {
height: 100%;
width: 100%;
}*/
.m {
opacity:1;
font-size: 0;
overflow: auto;
text-align: center;
margin: auto;
/*styling>>*/
background-color: #8F1C10;
}
.m::before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.m>div {
display: inline-block;
font-size: 19px;
margin: 20px;
max-width: 320px;
min-height: 20px;
min-width: 300px;
padding: 14px;
vertical-align: middle;
/*styling*/
color:white;
background-color: #140A08;
outline:none;
}
</style>